既然進來這里，相信大家一定也使用過官方自帶的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就是手滑到最后一張時，會出現一點小問題，這個感覺真沒辦法。。（求打賞啊）