我爱小程序
| 问题模块 |
|---|
| API和组件 |
重现方法，在两个swiper-item 之间快速来回切换几次，就会出现两个swiper-item 这间不断切换的问题，停都停不下来
swiper-item item大概在几十个这样子
网友回复
LastLeaf：
你的setData里面是不是又设了current？注意setData设置的数据里面不要包含影响到swiper current值的项目。
LastLeaf：
setData只会修改你设置的字段，所以你不需要回设的。
大头：
因为我需要在change的时候把前后的图片设为 show, 需要改到 setData, 但setData不是要整个data修改吗
LastLeaf：
为什么需要在change的时候回设呢？
大头：
这里是不是可以提供个可选项，要不要回调是同步的，因为不管我怎么调，只要我用到手动设置current的功能，我就需要回设回去，但我又不能保证这个回设是安全的，我的需求其实在change事件里根本不需要改到current,但因为我配置了current是变量，就一定要去设这个值
LastLeaf：
这里的原因是这样：事件回调函数是在独立的js线程中单独执行的，有一定的延迟，所以快速划动的时候，比如从A划动到B再快速滑动到C，划动到B的change事件里的setData，可能在划动到C之后才被应用，导致swiper又回到B，循环往复。
解决的方法是调整change事件里的setData策略。
大头：
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,
正常拖动不会有问题，就是前后来回快速拖几次之后就会出现,如果需要我可以提供全部的代码
LastLeaf：
可以提供currentChange的js代码吗？这个响应函数里面有没有尝试改变current值呢？
大头：
<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> |
LastLeaf：
麻烦提供一下相关的代码以便分析问题，谢谢！