swiper 会出现两个 swiper-item来回不断切换的问题
发布于 6 年前 作者 xiawen 4017 次浏览 来自 问答

重现方法，在两个swiper-item 之间快速来回切换几次，就会出现两个swiper-item 这间不断切换的问题，停都停不下来

swiper-item item大概在几十个这样子

10 回复

可以提供currentChange的js代码吗？这个响应函数里面有没有尝试改变current值呢？

这里是不是可以提供个可选项，要不要回调是同步的，因为不管我怎么调，只要我用到手动设置current的功能，我就需要回设回去，但我又不能保证这个回设是安全的，我的需求其实在change事件里根本不需要改到current,但因为我配置了current是变量，就一定要去设这个值

setData只会修改你设置的字段，所以你不需要回设的。

为什么需要在change的时候回设呢？

这里的原因是这样：事件回调函数是在独立的js线程中单独执行的，有一定的延迟，所以快速划动的时候，比如从A划动到B再快速滑动到C，划动到B的change事件里的setData，可能在划动到C之后才被应用，导致swiper又回到B，循环往复。

解决的方法是调整change事件里的setData策略。

因为我需要在change的时候把前后的图片设为 show, 需要改到 setData, 但setData不是要整个data修改吗

你的setData里面是不是又设了current？注意setData设置的数据里面不要包含影响到swiper current值的项目。

麻烦提供一下相关的代码以便分析问题，谢谢！

setCurrentPages: function (current){
    var pages = this.data.pages;
    for (var i = 0; i < pages.length; i++) {
       pages[i].show = false;
    }
    var pageIndexs = new Array();
    var totalPage = pages.length;
    if (current == 0){
       pageIndexs.push(0);
       pageIndexs.push(1);
    } else if (current==totalPage-1){
      pageIndexs.push(current-1);
      pageIndexs.push(current);
    }else{
      pageIndexs.push(current - 1);
      pageIndexs.push(current);
      pageIndexs.push(current+1);
    }
    for (var i = 0; i < pages.length; i++) {
      var page = pages[i];
      page.show = false;
    }
    for (var i = 0; i < pageIndexs.length; i++) {
        var page = pages[pageIndexs[i]];
        page.imgUri = page.imgUri.replace("\[i\]", "");
        page.show = true;
    }
    this.setData({
          bookId: this.data.bookId,
          pages: this.data.pages,
          status: 2,
          current: current
     })
  },
 
  getIndexByPageNo(pages, pageNo){
     if(!pageNo){
       return 0;
     }
     for(var i=0;i<pages.length;i++){
        if(pages[i].pageNo == pageNo){
          return i;
        }
     }
  },
 
  currentChange: function(e){
    console.log("current change" + e.detail.current);
    this.setCurrentPages(e.detail.current);
  }

有 setData ,但 current 用的还是当前的值，这里的逻辑是把当前页的上一页和下一页的 show值设为true,

正常拖动不会有问题，就是前后来回快速拖几次之后就会出现,如果需要我可以提供全部的代码

<view class="page">
  <view class="page_img">
    <view class="page__bd">
        <view wx:if="{{status==1}}" class="weui-loadmore">
            <view class="weui-loading"></view>
            <view class="weui-loadmore__tips">正在加载</view>
        </view>
        <!--view wx:if="{{currentPage}}" class="book_img_view" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
           <image src="http://yingyucover.cdn.youzhi.net/{{currentPage.imgUri}}" mode="scaleToFill" class="book_img"></image>
        </view-->
        <swiper class="page_swiper" bindchange="currentChange" current="{{current}}">
          <block wx:for="{{pages}}" >
            <swiper-item>
               <block wx:if="{{item.show}}">
                 <view>
                   <image data-index="{{index}}" src="http://yingyucover.cdn.youzhi.net/{{item.imgUri}}" class="slide-image" class="book_img" bindload="imageLoad"  />
                   <block wx:for="{{item.anchors}}" wx:key="sequence" wx:for-item="anchor" >
                       <view class="anchor" style="{{anchor.sytle}}" data-sentence="{{anchor.sentence}}" bindtap="playAnchor">
 
                       </view>
                   </block>
                 </view>
               </block>
            </swiper-item>
          </block>
        </swiper>
    </view>
  </view>
  <view class="page_audio">
    <audio poster="" name="" author="" src="{{audio}}" id="myAudio" controls loop bindtimeupdate="audioTimeUpdate"></audio>
  </view>
</view>
回到顶部