Vant Weapp SwipeCell滑动单元格组件的使用

首先我们来看看官方的文档 SwipeCell 滑动单元格
中间的代码和右边的预览都对不上，而且代码也不完整，不能一目了然。
那么根据我一天下来的使用体验，就让小弟我来给各位讲讲这个组件的使用方法和我遇到的问题。如果有错误的地方也希望各位多多指正。

Vant Weapp版本为1.7.1

基础用法

复制一份官方代码：

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">选择</view>
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
  </van-cell-group>
  <view slot="right">删除</view>
</van-swipe-cell>

• 这里的官方代码中用到了两个组件，单元格组件（van-cell、van-cell-group）和滑动单元格组件（van-swipe-cell），使用时需要先引入。

SwipeCell配置项

参数	说明	类型	默认值
name	标识符，可以在 close 事件的参数中获取到	string / number	-
left-width	左侧滑动区域宽度	number	0
right-width	右侧滑动区域宽度	number	0
async-close	是否异步关闭	boolean	false
disabled	是否禁用滑动	boolean	false

• 如果你只需要开启一侧的滑动区域，那么配置SwipeCell时，只需要配置对应一侧的滑动区域宽度即可，若两侧都配置则表示两侧均可滑动。

添加样式

可以看到滑动区域是没有样式的，所以我们需要给这些view加上class

<view slot="right" class="right">删除</view>

.right{
  background-color: red;
  height: inherit;
  width: 65px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

• 这里就只给右侧的滑动区域添加，左边同理。

如果需要两个按钮，可以这样：

<van-swipe-cell right-width="{{ 130 }}">
    <view style="touch-action:none;">
        <van-cell-group>
            <van-cell title="单元格" value="内容"/>
        </van-cell-group>
    </view>
    <view slot="right" class="right">
        <view class="item">收藏</view>
        <view class="item">删除</view>
    </view>
</van-swipe-cell>

.right{  
	height: inherit;
	width: 120px;
	color: white;
	display: flex;
}
.right .item{
	background-color: red;
	width: 60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.right .item:first-child{
	background-color: green;
}

异步关闭：async-close的用法

当van-swipe-cell配置async-close时，可通过绑定close事件实现关闭行为。

<van-swipe-cell async-close bind:close="onClose">
...
</van-swipe-cell>

Page({
	// 关闭事件
	onClose(event) {},
})

• 不使用async-close时，点击滑块区域会自动关闭。

close参数

参数	类型	说明
position	string	关闭时的点击位置 (left / right / cell / outside)
instance	object	SwipeCell 实例
name	string	标识符

但是！如果滑动区域只有一个功能（例如删除功能），然后你理所应当的把close事件当做滑块的点击事件来处理，可能会事与愿违。

前排提醒：滑块区域的点击事件还是需要额外绑定，具体可以往下看实践部分。

手动打开或关闭SwipeCell滑动区域

某些时候，我们可能需要添加一个按钮来打开或关闭滑动区域，亦或有多个SwipeCell时，需要手动关闭其他的SwipeCell。

方法名	类型	说明
open	position: “left”	开启的位置 (left / right / cell / outside)
close	-	收起单元格侧边栏

close事件中关闭

Page({
	// 关闭事件
	onClose(event) {
		event.detail.instance.close();
	},
})

任意位置打开和关闭

通过使用微信小程序的selectComponent来获取SwipeCell实例进行开启和关闭。

<van-swipe-cell id="vsc1" async-close right-width="{{ 130 }}" bind:close="onClose">
...
</van-swipe-cell>

Page({
	funcName() {
		// 开启
		this.selectComponent("#vsc1").open({position: "right"});
		// 关闭
		this.selectComponent("#vsc1").close();
	},
})

项目实践

接下来通过项目实践，来进一步了解SwipeCell组件的用法以及我遇到的坑（生气气

需求

展示用户收藏的列表，提供取消关注的功能。

自定义内容

仅仅使用单元格组件作为我们的内容载体可能自由度还不够高，无法满足正常的开发需求。所以这里我们要自定义内容。

<van-swipe-cell async-close id="store{{item.store_id}}" right-width="{{ 80 }}" wx:for="{{store.data}}" wx:key="index" data-store-id="{{item.store_id}}">
	<!-- 自定义内容 -->
	<view style="touch-action:none;">
        <image src="{{ item.pic }}"></image>
        <view bindtap="goStore" data-store="{{item}}">
            <view>
	             <span>{{ item.store_name }}</span>
	             <van-tag type="success" wx:if="{{item.is_self_support}}">自营</van-tag>
            </view>
            <view>{{ item.num }}人关注</view>
        </view>
        <van-icon name="ellipsis" catch:tap="showMore" data-store-id="{{item.store_id}}"></van-icon>
    </view>
    <!-- 自定义内容 end -->
    <view slot="right">
        <view catch:tap="unlike">取消关注</view>
    </view>
</van-swipe-cell>

• 样式就不帖上来了，了解大概长啥样就好了。

事件处理

点击按钮打开滑块区域事件

showMore(e){
    const storeId = e.target.dataset.storeId; 
    // 关闭其他swipeCell
    for (const item of this.data.store.data) {
        if (item.store_id === storeId) continue;
        this.selectComponent("#store"+item.store_id).close();
    }        
    this.selectComponent("#store"+storeId).open({position: "right"});
}

• 手动打开的SwipeCell不会自动关闭其他SwipeCell组件，所以需要手动关闭。（滑动打开的就可以自动关闭）

SwipeCell close事件问题

如果直接使用close事件来处理业务逻辑，可能会出现意想不到的问题。

如上述wxml代码，存在点击事件绑定goStore方法，

goStore(event) {
    const store = event.currentTarget.dataset.store;
    wx.navigateTo({
        url: "/pages/hotel/hotel_details/index?id=" + store.store_id,
    })
},

该方法会跳转页面。当跳转页面时，会触发SwipeCell的close事件！

所以处理业务逻辑时，还是需要单独在一个view上绑定，不要想着偷懒哦。

可能出现的问题

渲染层错误

[渲染层错误] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

产生原因：可能是touchmove事件和某个滚动的操作冲突了（有了解的家人们可以留言说说原因）
解决方法：增加一个父级view并添加 style="touch-action:none;"

<van-swipe-cell async-close right-width="{{ 65 }}" bind:close="onClose">
    <view style="touch-action:none;">
        <van-cell-group>
            <van-cell title="单元格" value="内容"/>
        </van-cell-group>
  	</view>
  	<view slot="right" class="right">删除</view>
</van-swipe-cell>

点击空白处关闭全部SwipeCell组件

很遗憾，目前我也没找到合适的办法。（哪位小伙伴知道的快快告诉我！）
你可以尝试说服产品经理说不要这个功能。