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方法了

标签: vant, swiper-cell, 滑动单元格

评论已关闭