介绍一个性能飞快的移动端滑屏组件iSlider.js

﹏ヽ暗。殇╰゛Y 2022-07-30 13:17 184阅读 0赞

islider功能介绍：

/**
     * iSlider 高性能全屏滑动组件 
     * @class iSlider
     * @param {object} opts
     * @param {string} opts.wrap='.wrap' 容器 
     * @param {string} opts.item='.item'  滚动单元的元素
     * @param {string} opts.playClass='play'  触发播放动画的class
     * @param {number} [opts.index=0]  设置初始显示的页码
     * @param {array} [opts.noslide=[]]  设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动 
     * @param {number} [opts.speed=400] 动画速度 单位:ms
     * @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素
     * @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是.  设成false为水平滑动.
     * @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用
     * @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false
     * @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件,  默认不阻止, 该参数仅在局部滚动时有效,   如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面.  如果是全屏情况 则会阻止
     * @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true
     * @param {function} [opts.onslide]  滑动后回调函数  会回传index参数
     * @param {array} [opts.loadingImgs]  loading需要加载的图片地址列表
     * @param {function} [opts.onloading]  loading时每加载完成一个图片都会触发这个回调  回调时参数值为 (已加载个数,总数)
     * @param {number} [opts.loadingOverTime=15]  预加载超时时间 单位:秒
     * @desc 
    
    -  如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面.
    -  简洁,易用.  无css依赖.
    -  专注于页面滑动, 没有冗余代码 , 保证性能.
    -  组件没有任何依赖.
    -  imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000
    -  github: https://github.com/kele527/iSlider
    
    
     * @example
    
        //极简用法
        new iSlider(); //容器默认是 .wrap  元素默认是 .item   动画播放class默认是 play
    
        //普通用法
        new iSlider({
            wrap:'.wrap',
            item:'.item',
            playClass:'play',
            onslide:function (index) {
                console.info(index)
            }
        });
    
        //带loading进度条用法
        new iSlider({
            wrap:'.wrap',
            item:'.item',
            playClass:'play',
            onslide:function (index) {
                console.info(index)
            },
            loadingImgs:[
                'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000',
                'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000',
                'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000',
                'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000'
            ],
            onloading:function (loaded,total) {
                this.$('#loading div').style.width=loaded/total*100+'%';
                if (loaded==total) {
                    this.$('#loading').style.display="none"
                }
            }
        });
    
        demo http://kele527.github.io/iSlider/demo1.html
    
     * 
     */

综上所述，iSlider集成了预加载、loding、滑屏等多功能组件库

实例参考：http://nextidea.qq.com/act/a20150610ideas/

iSlider.js：http://nextidea.qq.com/act/a20150610ideas/js/iSlider.js

感兴趣的朋友可以看看源码，研究一下这个库，分析优劣，加以改进，打包成自己的库。