• U5_343102
  • 43.8MB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-06-09 03:45
积分管理系统java源码 StuQ《Node.js微信开发》 课程概览 我们这次讲的课是《Node.js微信开发》,是StuQ推出的第一门课,期望做成一门可以打样的课。 Why 随着移动互联网的发展,app开发技术也逐渐从native到hybrid,当微信横空出世之后,拥有大量用户,很多公司为了能够借力,集成微信作登录为用户授权管理,当微信推出公众号后,h5技术就得到了大量应用,h5和web开发都是要使用js作为主要语言,无论是dom操作,动画,还是ajax异步网络请求等,故而js是必须会的。 如果能够用js可以搞定h5端,还能搞定服务器端的微信开发,是不是更好呢?基于这个初衷,我们特地准备《Node.js微信开发》一课,Node.js是目前最火的技术,微信开发也是,而微信开发主要是以h5和js为主,以js为纽带,链接Node和h5端开发,既能完成应用开发,又能让大家在技术上有一定指导意义,为日后的全栈选择提供了可能。 作者简介 桑世龙(网名i5ting),StuQ 明星讲师,开源项目 Moajs 作者,Node.js 技术布道者 曾就职在新浪、网秦,曾做过前端、后端、数据分析、移动端
<h1 id="intro">iScroll, smooth scrolling for the web</h1> iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. It works on desktop, mobile and smart TV. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike. iScroll does not just *scroll*. It can handle any element that needs to be moved with user interaction. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. Give it a broom and it will also clean up your office. Even on platforms where native scrolling is good enough, iScroll adds features that wouldn't be possible otherwise. Specifically: * Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller. * Animation can be customized with user defined easing functions (bounce, elastic, back, ...). * You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...). * Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer. <h2 id="iscroll-versions">The many faces of iScroll</h2> iScroll is all about optimization. To reach the highest performance it has been divided into multiple versions. You can pick the version that better suits your need. Currently we have the following fragrances: * **iscroll.js**, it is the general purpose script. It includes the most commonly used features and grants very high performance in a small footprint. * **iscroll-lite.js**, it is a stripped down version of the main script. It doesn't support snap, scrollbars, mouse wheel, key bindings. But if all you need is scrolling (especially on mobile) *iScroll lite* is the smallest, fastest solution. * **iscroll-probe.js**, probing the current scroll position is a demanding task, that's why I decided to build a dedicated version for it. If you need to know the scrolling position at any given time, this is the iScroll for you. (I'm making some more tests, this might end up in the regular `iscroll.js` script, so keep an eye on it). * **iscroll-zoom.js**, adds zooming to the standard scroll. * **iscroll-infinite.js**, can do infinite and cached scrolling. Handling very long lists of elements is no easy task for mobile devices. *iScroll infinite* uses a caching mechanism that lets you scroll a potentially infinite number of elements. <h2 id="getting-started">Getting started</h2> So you want to be an iScroll master. Cool, because that is what I'll make you into. The best way to learn the iScroll is by looking at the demos. In the archive you'll find a `demo` folder [stuffed with examples](https://github.com/cubiq/iscroll/tree/master/demos). Most of the script features are outlined there. `IScroll` is a class that needs to be initiated for each scrolling area. There's no limit to the number of iScrolls you can have in each page if not that imposed by the device CPU/Memory. Try to keep the DOM as simple as possible. iScroll uses the hardware compositing layer but there's a limit to the elements the hardware can handle. The optimal HTML structure is: <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> iScroll must be applied to the wrapper of the scrolling area. In the above example the `UL` element will be scrolled. Only the first child of the container element is scrolled, additional children are simply ignored. <div class="tip"> <p><code>box-shadow</code>, <code>opacity</code>, <code>text-shadow</code> and alpha channels are all properties that don't go very well together with hardware acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing lag and jerkiness.</p> <p>Sometimes a background image to simulate the shadow performs better than <code>box-shadow</code>. The bottom line is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.</p> </div> The minimal call to initiate the script is as follow: <script type="text/javascript"> var myScroll = new IScroll('#wrapper'); </script> The first parameter can be a string representing the DOM selector of the scroll container element OR a reference to the element itself. The following is a valid syntax too: var wrapper = document.getElementById('wrapper'); var myScroll = new IScroll(wrapper); So basically either you pass the element directly or a string that will be given to `querySelector`. Consequently to select a wrapper by its class name instead of the ID, you'd do: var myScroll = new IScroll('.wrapper'); Note that iScroll uses `querySelector` not `querySelectorAll`, so only the first occurrence of the selector is used. If you need to apply iScroll to multiple objects you'll have to build your own cycle. <div class="tip"> <p>You don't strictly need to assign the instance to a variable (<code>myScroll</code>), but it is handy to keep a reference to the iScroll.</p> <p>For example you could later check the <a href="#scroller-info" rel='nofollow' onclick='return false;'>scroller position</a> or <a href="#destroy" rel='nofollow' onclick='return false;'>unload unnecessary events</a> when you don't need the iScroll anymore.</p> </div> <h2 id="initialization">Initialization</h2> The iScroll needs to be initiated when the DOM is ready. The safest bet is to start it on window `onload` event. `DOMContentLoaded` or inline initialization are also fine but remember that the script needs to know the height/width of the scrolling area. If you have images that don't have explicit width/height declaration, iScroll will most likely end up with a wrong scroller size. <div class="important"> <p>Add <code>position:relative</code> or <code>absolute</code> to the scroll container (the wrapper). That alone usually solves most of the problems with wrongly calculated wrapper dimensions.</p> </div> To sum up, the smallest iScroll configuration is: <head> ... <script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new IScroll('#wrapper'); } </script> </head> ... <body onload="loaded()"> <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> </body> Refer to the [barebone example](http://lab.cubiq.org/iscroll5/demos/barebone/) for more details on the minimal CSS/HTML requirements. <div class="tip"> <p>If you have a complex DOM it is sometimes smart to add a little delay from the <code>onload</code> event to iScroll initialization. Executing the iScroll with a 100 or 200 milliseconds delay gives the browser that little rest that can save your ass.</p> </div> <h2 id="configuring">Configuring the iScroll</h2> iScroll can be configured by passing a second parameter during the initialization phase. var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true }); The example above turns on mouse wheel support and scrollbars. After initialization you can access the *normalized* values from the `options` object. Eg: console.dir(myScroll.options); The above will return the configuration the `myScroll` instance will run on. By *normalized* I mean that if you set `useTransform:true` (for example) but the browser doesn't support CSS transforms, `useTransform` will be `false`. <h2 id="the-core">Understanding the core</h2> iScroll uses various techniques to scroll based on device/browser capability. **Normally you don't need to configure the engine**, iScroll is smart enough to pick the best for you. Nonetheless it is important to understand which mechanisms iScroll works on and how to configure them. ### <small>options.</small>useTransform By default t