需求:在原生微信小程序中使用了VantUI框架的SwipeCell 滑动单元格,当我左滑删除时,点击其他区域让删除隐藏
效果图:
WXML:
<block wx:for="{
{list}}" wx:key="id">
<van-swipe-cell id="wx{
{item.id}}" right-width="{
{65}}" disabled="{
{state=='1'}}" bind:open="onOpen">
<van-cell-group>
<view role="option" class="weui-cell weui-cell_example" data-id="{
{item.id}}" data-parentId="{
{item.parentId}}" catchtap="getQuestion">
<view class="weui-cell__bd">
<view class="">{
{index+1}}、{
{item.problems}}</view>
<text class="update">{
{filter.formatDateHM(item.optime)}}</text>
</view>
</view>
</van-cell-group>
<view slot="right" class="deleteQuestion pa" data-item="{
{item}}" catchtap="deleteQuestion">删除</view>
</van-swipe-cell>
</block>
JS:
Page({
data: {
selected:'',//用来存储左滑的当前ID
list:[],
},
onOpen(e){//这是左滑打开事件
this.setData({
selected:e.currentTarget.id
})
},
onTap(){//这是点击其他区域时,根据id让当前打开的元素关闭
this.selectComponent("#"+this.data.selected+"").close();
}
})
注:我这里做的跟官方的做法有些区别,但是我感觉我这种好点,简单 (#^.^#)