SwipeCell 滑动单元格的demo,官方并没有给出一个可以使用的demo。只是说用小程序的selectComponent来获取到当前组件,然后就可以调用open与close事件了。
WXML如下
<block wx:for="{{list}}" wx:key="index">
<van-swipe-cell right-width="{{ 120 }}" id="swipe-{{index}}">
<view class="station-list wd">
<view class="station-list-top">
<text>{{item.jobName}}</text>
</view>
<view class="station-list-bottom">
<text>{{item.recruitmentSubjectName}}</text>
</view>
<view class="more" bindtap="swipeOpen" data-index="{{index}}">
<text class="iconfont icongengduo"></text>
</view>
</view>
<view slot="right" class="right-bottom">
<view class="right-edit">修改</view>
<view class="right-del">删除</view>
</view>
</van-swipe-cell>
</block>
JS如下
swipeOpen(e){
let index = e.currentTarget.dataset.index
this.selectComponent('#swipe-'+index).open('right');
}
这样用的话,并不会报错。但是无论怎么样都是不能让它滑动打开的。
我去研究了官方的源码,发现open事件也仅仅是调用了一下swipeMove方法,swipeMove方法来实现的滑动效果。
我打印了一下参数。发现在点击打开事件的时候,swipeMove的方法触发了3次,但是我只是点击了一次啊。第一次打印出来的距离是0,第二次是我们设置的right-width的数值,第三次又变成了0。其实问题已经很明显了,是有冒泡产生了。
往下读了源码,发现还有一个onClick事件,而这个onClick事件的结束,会回到初始状态。
这就是问题所在了。
还好,我们不用去手动改源码。因为微信官方提供了阻止冒泡的方法。我们把wxml里面绑定事件的方法bindtap改成catchtap方法绑定。冒泡事件就不会产生了。我们就可以愉快的使用open方法了
评论 (0)