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

embedded/2024/10/18 6:05:47/
  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 = []}
})
  1. 然后在使用文件 wxml 中 最外层的 view 绑定 页面点击事件 bindtap="onSwipeCellPage"
  2. 给 swipe-cell 绑定一个 id <van-swipe-cell class="goods-swipe" right-width="{{ 65 }}" id="swipe-cell-{{item.id}}">
  3. 给 swipe-cell 绑定open和click事件 <van-swipe-cell class="goods-swipe" right-width="{{ 65 }}" id="swipe-cell-{{item.id}}" bind:open="swiperCellOpen" bind:click="onSwipeCellClick">
  4. 在 使用文件 js 中 引入 Behaviors
  5. 然后在 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()}}
})

http://www.ppmy.cn/embedded/85656.html

相关文章

Vue element ui分页组件示例

https://andi.cn/page/621615.html

java算法实现-1

1. 算法编程 1&#xff1a;请编写Java代码实现实现以下逻辑与输出 &#xff1f; 题目&#xff1a;古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第四个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c…

在appium中,如何通过匹配图片来进行断言?

在Appium中进行图片匹配断言&#xff0c;可以使用OpenCV来实现。以下是使用Appium和OpenCV进行图片匹配断言的示例代码。 首先&#xff0c;需要确保安装了必要的库&#xff1a; pip install opencv-python-headless pip install opencv-python pip install numpy然后&#xf…

高级java每日一道面试题-2024年7月26日-JVM篇-JVM对Java原生锁做了哪些优化?

面试官: JVM对Java原生锁做了哪些优化? 我回答: 在Java高级面试中&#xff0c;关于JVM对Java原生锁的优化是一个重要的话题。JVM&#xff08;Java虚拟机&#xff09;为了提高多线程程序的性能和效率&#xff0c;对Java的原生锁&#xff08;如synchronized关键字和Lock接口&a…

loj2143组合题解

组合 求 ∑ i 0 ∞ C n k i k r \sum_{i0}^{\infty} C_{n k}^{i kr} ∑i0∞​Cnkikr​ 模 p p p 的值。 这道题题目非常的善良&#xff0c;直接把式子送给我们了&#xff0c;那我们直接开始推式子&#xff1a; ∑ i 0 ∞ C n k i k r ∑ i 0 ∞ ∑ j 0 w C w j C n…

视觉SLAM--回环检测

文章目录 创建字典相似度计算增加字典规模 回环检测的意义&#xff1a;可以使 后端位姿图得到一个 全局一致估计。 视觉SLAM的主流做法&#xff1a; 基于外观的回环检测方法&#xff0c;仅 根据两幅图像的相似性确定回环检测关系。这种方法&#xff0c;摆脱了累计误差&…

SAPUI5基础知识20 - 对话框和碎片(Dialogs and Fragments)

1. 背景 在 SAPUI5 中&#xff0c;Fragments 是一种轻量级的 UI 组件&#xff0c;类似于视图&#xff08;Views&#xff09;&#xff0c;但它们没有自己的控制器&#xff08;Controller&#xff09;。Fragments 通常用于定义可以在多个视图中重用的 UI 片段&#xff0c;从而提…

鸿蒙界面开发

界面开发 //构建 → 界面 build() {//行Row(){//列Column(){//文本 函数名(参数) 对象.方法名&#xff08;参数&#xff09; 枚举名.变量名Text(this.message).fontSize(40)//设置文本大小.fontWeight(FontWeight.Bold)//设置文本粗细.fontColor(#ff2152)//设置文本颜色}.widt…