微信小程序删除滑块 SwiperCell 自动收起 Van weapp van-swipe-cell 滑块自动收起 点击页面也自动收起滑块

1. 在当前页面整个 view 中 给页面绑定 点击事件bindtap="onSwipeCellPage"
2. 给 van-swipe-cell 组件设置 id （for循环可以添加 id="swip-cell-{{item.id}}" ）
3. van-swipe-cell 组件 添加属性 当用户打开滑块时触发 bind:open="swiperCellOpen"
4. van-swipe-cell 组件 添加属性 点击滑动单元格时触发的事件 bind:click="onSwipeCellClick"
5. 需要对单元格实例数组进行遍历，遍历以后获取每一个实例，让每一个实例调用 close 方式即可

示例

1. 新建文件夹 SwiperCell.js

Page({data: {swipeCellQueue: [], //用来存储滑动单元格实例 },// 当用户打开滑块时触发swiperCellOpen(event) {// 获取单元格实例const instance = this.selectComponent(`#${event.target.id}`)// 将实例追加到数据中this.data.swipeCellQueue.push(instance)},// 给页面绑定 点击事件onSwipeCellPage() { this.onSwipeCellCommonClick() },// 点击滑动单元格时触发的事件onSwipeCellClick() { this.onSwipeCellCommonClick() },onSwipeCellCommonClick() {// 需要对单元格实例数组进行遍历，遍历以后获取每一个实例，让每一个实例调用 close 方式即可this.data.swipeCellQueue.forEach((instance) => {instance.close()})// 将滑动单元格数组重置为空this.data.swipeCellQueue = []}
})

2. 然后在使用文件 wxml 中 最外层的 view 绑定 页面点击事件 bindtap="onSwipeCellPage"
3. 给 swipe-cell 绑定一个 id <van-swipe-cell class="goods-swipe" right-width="{{ 65 }}" id="swipe-cell-{{item.id}}">
4. 给 swipe-cell 绑定open和click事件 <van-swipe-cell class="goods-swipe" right-width="{{ 65 }}" id="swipe-cell-{{item.id}}" bind:open="swiperCellOpen" bind:click="onSwipeCellClick">
5. 在 使用文件 js 中 引入 Behaviors
6. 然后在 onHide 方法 引入 在页面隐藏的时候，需要让删除滑块自动弹回

import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userStore'
import { reqDelCartGoods } from "@/api/cart"import { swipeCellBehavior } from "@/behaviors/swiperCell"
const computedBehavior = require("miniprogram-computed").behavior
ComponentWithStore({behaviors: [ swipeCellBehavior],storeBindings: {store: userStore,fields: ['token']},data: {cartList: []},methods: {//  如果使用 Compoent 方法来构建页面// 生命周期钩子函数 需要在 methods 中才可以// 删除商品async delCartGoods(evnet) {// 要删除的idlet { id } = evnet.currentTarget.dataset// 自己封装的 modal方法const isOk = await wx.modal({title: '提示',content: "您确定要删除吗?"})if (!isOk) {return}const res = await reqDelCartGoods(id)if (res.code === 200) {....}},onHide() {this.onSwipeCellCommonClick()}}
})