信息门户网站建设合同,邢台网站,个人网站建设图片素材,北京app开发哪家好在当前页面整个 view 中 给页面绑定 点击事件bindtaponSwipeCellPage给 van-swipe-cell 组件设置 id #xff08;for循环可以添加 idswip-cell-{{item.id}} #xff09;van-swipe-cell 组件 添加属性 当用户打开滑块时触发 bind:openswiperCel… 在当前页面整个 view 中 给页面绑定 点击事件bindtaponSwipeCellPage给 van-swipe-cell 组件设置 id for循环可以添加 idswip-cell-{{item.id}} van-swipe-cell 组件 添加属性 当用户打开滑块时触发 bind:openswiperCellOpen van-swipe-cell 组件 添加属性 点击滑动单元格时触发的事件 bind:clickonSwipeCellClick需要对单元格实例数组进行遍历遍历以后获取每一个实例让每一个实例调用 close 方式即可 示例
新建文件夹 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 []}
})然后在使用文件 wxml 中 最外层的 view 绑定 页面点击事件 bindtaponSwipeCellPage给 swipe-cell 绑定一个 id van-swipe-cell classgoods-swipe right-width{{ 65 }} idswipe-cell-{{item.id}}给 swipe-cell 绑定open和click事件 van-swipe-cell classgoods-swipe right-width{{ 65 }} idswipe-cell-{{item.id}} bind:openswiperCellOpen bind:clickonSwipeCellClick在 使用文件 js 中 引入 Behaviors然后在 onHide 方法 引入 在页面隐藏的时候需要让删除滑块自动弹回
import { ComponentWithStore } from mobx-miniprogram-bindings
import { userStore } from /stores/userStore
import { reqDelCartGoods } from /api/cartimport { 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()}}
})