关于微信小程序swiper视图滑块的循环滚动问题

    既然进来这里，相信大家一定也使用过官方自带的swiper了，但是官方自带的swiper缺陷很明显，就是不能循环滚动，每次到最后一张就向左回到第一张，感觉这是非常影响用户体验的，所以咱用的一点也不爽，所以，怎么办呢，自己重新写一个循环滚动的视图，这对有过循环滚动经验的人来说不是什么难是，我没有写过，但是一想无非就是用个scroll-view将图片放进去，然后用js计时器实现它自己滚动。具体怎么写我就不知道了，这倒是和iOS的ScrollView非常相似，感觉就是在仿的iOS。

    但是咱感觉没必要自己写，毕竟官方也封装好了一个东西放这了，所以就开始自己想，但是从头到尾有一个总的思路 就是我到最后一张了，要向右滑到第一张，实现循环滚动，我开始找到了swiper的current属性

   当然你得把数据都绑定好


//.wxml

<swiper indicator-dots="{{indicatorDots}}" current="{{index}}" autoplay="{{autoplay}}"
 interval="{{interval}}" duration="{{duration}}" bindchange="imageChange">
    <block wx:for="{{another?imgUrls:imgUrls2}}" >
    <swiper-item>
        <image src="{{item}}" class="slide-image" style="width:100%; height: 100%;)" mode="scaleToFill"/>
    </swiper-item>
    </block>
</swiper>

//.js

Page({
  data: {
     imgUrls: [
      '../../assets/img/001.jpg',
      '../../assets/img/002.jpg',
      '../../assets/img/003.jpg',
      '../../assets/img/001.jpg',
    ],
    another:true,
    index:0,
    indicatorDots: false,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    movie:[],
  },

      然后我们就可以通过index来改变当前页面了，我把swiper的autoplay属性设为false,它就不会自动播放了，我给它加了个setInterval（），然后在里面增加index，记得把autoplay设为false,x![](upload/topic/week_51/5b125a2f-7abb-450a-9901-b644adc7d39f.png)就能自动向右滑了，当然减少index它就向左滑,代码如下


onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数  
    var appInstance = this;
    var time = setInterval(function(){

        var index = appInstance.data.index;
        var length = appInstance.data.imgUrls.length;

        index++;
        if(index == length) {  
            index = 0;     
        }
        appInstance.setData({
            index:index,
        });
        },3000);
        // movieUtil.loadData("https://api.douban.com/v2/movie/in_theaters",appInstance);
    },

    但是这样的问题还是解决不了，在最后一张改变index为0它还是会向左滑到开头，没意义，但是我们已经能稍微优化一下，让他滑到最右边然后在从右边一张一张滑回来，这样循环来回滑动，最起码不会跳过图片了，代码如下


 onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数  
    var appInstance = this;
    var right = true;//给一个标识，是向右滑还是向左滑
    var time = setInterval(function(){

        var index = appInstance.data.index;
        var length = appInstance.data.imgUrls.length;
        if(right) {//向右滑index++,左滑index--
            index++;
        }
        else {
            index--;
        }
        if(index == length) {//到最右边回到倒数第二张
            index = length - 2;
            right = false;
        }
        if(index == -1) {//到最左边回到第二张
            index = 1;
            right = true;
        }
        appInstance.setData({
            index:index,
          });  
        },3000);
        // 
    },

    但是这样我们还是没达到开始的要求，我试过很多方法，包括重新加载滑动数组，更换滑动的数组，但是都不行，封装好的应该是自动保存了数组的下标的，我们更换数组回到第一张时一样的会左滑，没什么意义，想了很久，终于发现解决这个问题的一个偏门的办法，这里不多说，直接上代码：


  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数  
    var appInstance = this;

    var time = setInterval(function(){

        var index = appInstance.data.index;
        var length = appInstance.data.imgUrls.length;

        if(index == 0) {
            appInstance.setData({
                duration:1000
            });
        }
        index++;
        if(index == length) {  
            index = 0;     
            appInstance.setData({
                duration:10
            });
        }
        appInstance.setData({
            index:index,
        });
        },3000);
    },

通过修改最后一张到第一张之间滑动的时间，让他快到我们肉眼看不出来，这样基本就能达到循环右滑的效果了，我继续优化了一下，放弃使用setInterval()和index，用swiper自带的bindChange函数，感觉前面说的都是废话，现在才是正点0^^0,注解没什么好写的，大家自己去试试吧，看代码：

    imageChange:function(e){
        var appInstance = this;
        var index = e.detail.current;
        var length = appInstance.data.imgUrls.length;
        console.log(index);
        if(index == 0) {
            appInstance.setData({
                duration:1000,
                interval:3000
            });
        }    
        if(index == length - 1) {  
            index = 0;     
            appInstance.setData({
                duration:1,
                interval:100,
                index:index,
            });
        }
    },

    这样基本上就是一个完美的循环滚动了，当然还有一个小bug就是手滑到最后一张时，会出现一点小问题，这个感觉真没办法。。（求打赏啊）