Swiper插件

此插件功能比较强大，网页端、手机端都可以使用的插件。这里记录一下在微信h5页面里面滑动获取数据。

先下载css和js，引用到项目中

这里有6个节点，没划一个节点去获取此节点里面的数据。

Swiper插件

初始化插件：也就是说，我每次滑动完毕，都会去执行GetList()方法，获取数据,下面的代码都写都是在$(function(){ 这里完成的 })

        
var swiper = new Swiper('.process', {
                touchRatio:1/parseInt(dd),  //计算滑动距离比例，每次可以滑动多少距离，dd 是a标签的个数（做滑动标签的个数）    这样每次只能滑动一下了      
                slidesPerView: 3,   //同时可以显示多少个 
                centeredSlides: true,     //滑块居中
slideToClickSlide:true,//点击slide可以滑动
                paginationClickable: true,  //阻止冒泡点击事件
                initialSlide: iValue,        //初始化的索引，显示在那个位子（图片）  这个值在这个初始化之前就获取了，这里不显示了
                onTransitionEnd: function (swiper) {    //切换结束时执行  如果索引不为0，初始化的时候会执行此函数  
                    //bug 索引为1没执行此回调函数 
                    // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                    index = swiper.activeIndex; //index在前面前面附的值，这里不显示
                    if (parseInt(index) === parseInt(iValue)) {
                        swiper.lockSwipeToNext(); //禁止向右
                    } else {                       
                        swiper.unlockSwipeToNext(); //解禁
                    }
                    //console.log(index);
                    index = parseInt(index) + 1;
                    GetList(); //获取数据的方法
                }
            });

这里有个BUG,按理说我索引为1就是显示第二的时候，应该要执行回调方法，然而并没有，所以你可以把回调函数里面需要做的事情在外面在写一遍即可。

这里只是影响到了我能不能向右滑，所以只用把影响到你的代码在外面写一遍即可

    //索引为1的时候
            if (parseInt(index) === (parseInt(iValue)+1)) {
                swiper.lockSwipeToNext(); //禁止向右
            } else {              
                swiper.unlockSwipeToNext(); //解禁
            }

轮播图：

<section class="pictures">
    <ul class="swiper-wrapper">
   <%--   数据加载完成后有多条此样的数据   <li class="swiper-slide">
            <img src="http://www.96909.gd.cn/sqfww/UploadFile/ea_2015528102924.jpg">
            <span class="name">
                <h2>XXX</h2>
                <p><i class="icon">&#xe651;</i>XXXX</p>
                <p><i class="icon">&#xe607;</i>XXX</p>
                <p><i class="icon">&#xe65a;</i>XXX</p>
            </span>
           </li>--%>
    </ul>
    <span class="icon switch swiper-button-prev">&#xe730;</span>
    <span class="icon switch swiper-button-next">&#xe603;</span>
</Section>

  var mySwiper = new Swiper('.pictures', {
                //autoplay: 3000,  //是否自动滑动
                initialSlide: index, 
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next'
            });

相关推荐