收藏
回答

swiper 会出现两个 swiper-item来回不断切换的问题

问题模块
API和组件

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


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

最后一次编辑于  2017-06-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

10 个回答

  • LastLeaf
    LastLeaf
    2017-06-12

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

    2017-06-12
    赞同
    回复
  • 大头
    大头
    2017-06-12
    <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>


    2017-06-12
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-06-12

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

    2017-06-12
    赞同
    回复
  • 大头
    大头
    2017-06-12
    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,


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

    2017-06-12
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-06-13

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


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

    2017-06-13
    赞同
    回复
  • 大头
    大头
    2017-06-14

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

    2017-06-14
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-06-14

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

    2017-06-14
    赞同
    回复
  • 大头
    大头
    2017-06-14

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

    2017-06-14
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-06-14

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

    2017-06-14
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-06-14

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

    2017-06-14
    赞同
    回复