uview中SwipeAction滑动单元格如何优雅地将其关闭,亲测实用!!!

作者在项目中使用SwipeAction遇到点击按钮区域滑块无法还原的问题。通过添加ref并封装组件内的closeHandler方法,实现了在需要时优雅地恢复滑块原始状态,即使ref的style为undefined也能解决问题。

最近在做项目,用到了SwipeAction 滑动单元格,可是我发现当点击按钮区域的时候无法将滑块恢复原样。

如下图1和图2:我在点击按钮区域之外的时候发现能够将滑块恢复到原样,也注意到是通过DOM操作让滑块恢复原样的。可是我尝试用ref想要拿到它的style来改动它的样式,结果style为undefinition。我寻思了许久,也尝试了各种办法,也翻遍了官方文档,最终我发现了一种比较优雅且实用的方法。干货在下文。

图1
图2

直接上干货(以Vue2为例)

1.直接给组件项添加一个ref。代码如下:

<u-swipe-action-item ref="item">

2.组件内部有一个closeHandler方法,咋们直接根据组件内部的方法封装一个优雅的方法,需要的时候直接调用即可。代码如下:

shut(){

this.$refs.item.forEach(item=>item.closeHandler(true))
           }

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值