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

  • • 发表于 11个月前
  • • 作者 啊哈
  • • 1445 次浏览
  • • 16 条评论
  • • 最后编辑时间 11个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

    既然进来这里,相信大家一定也使用过官方自带的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就是手滑到最后一张时,会出现一点小问题,这个感觉真没办法。。(求打赏啊)
分享到:
评论区(共16条评论)
16条评论
Ctrl+Enter
作者

啊哈

啊哈

APP:0 帖子:2 回复:9 积分:108

已加入社区[378]天

主人太懒,签名没设置!

作者详情》
精品推荐课程更多
扫码入群
Top