微信小程序删除滑块 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 = []}
})
  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.mzph.cn/bicheng/49352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ajax原理-XMLHttpRequest、Promise以及封装简易的axios函数

这里写目录标题 一级目录二级目录三级目录 一、Ajax原理-XMLHttpRequest对象1.步骤 二、XMLHttpRequest-查询参数1.定义2.语法 二、XMLHttpRequest-数据提交1.需求2.核心 三、Promise1.定义2.好处3.三种状态 四、封装简易的axios1.需求&#xff1a;2.封装axios函数获取数据3.封…

使用UDP套接字编程详解【C语言】

UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种面向无连接的传输层协议&#xff0c;用于在计算机网络上发送数据。它与 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;相比具有轻量、高效的特点&…

英语(二)-我的学习方式

章节章节汇总我的学习方式历年真题作文&范文 目录 1、背单词 2、学语法 3、做真题 4、胶囊助学计划 写在最前&#xff1a;我是零基础&#xff0c;初二就听天书的那种。 本专栏持续更新学习资料 1、背单词 单词是基础&#xff0c;一定要背单词&#xff01;考纲要求要…

云动态摘要 2024-07-23

给您带来云厂商的最新动态,最新产品资讯和最新优惠更新。 最新优惠与活动 数据库上云优选 阿里云 2024-07-04 RDS、PolarDB、Redis、MongoDB 全系产品新用户低至首年6折起! [免费体验]智能助手ChatBI上线 腾讯云 2024-07-02 基于混元大模型打造,可通过对话方式生成可视化…

中文分词库 jieba 详细使用方法与案例演示

1 前言 jieba 是一个非常流行的中文分词库&#xff0c;具有高效、准确分词的效果。 它支持3种分词模式&#xff1a; 精确模式全模式搜索引擎模式 jieba0.42.1测试环境&#xff1a;python3.10.9 2 三种模式 2.1 精确模式 适应场景&#xff1a;文本分析。 功能&#xff1…

qt设置过滤器

1.创建事件过滤器类&#xff0c;在主窗口中安装事件过滤器 class PasteFilter : public QObject {Q_OBJECTpublic:PasteFilter(QObject *parent nullptr) : QObject(parent) {}protected:bool eventFilter(QObject *obj, QEvent *event) override {if (event->type() QEv…

【Zotero插件】Zotero Tag为文献设置阅读状态 win11下相关设置

【Zotero插件设置】Zotero Tag为文献设置阅读状态 win11下相关设置 1.安装Zotero Tag1.1安装1.2配置1.3 win11的相关设置1.3.1 字体安装 参考教程 2.支持排序的标注参考教程 1.安装Zotero Tag 1.1安装 Zotero Tag插件下载链接安装方法&#xff1a;Zotero–》工具–》附加组件…

googleTest 源码主线框架性分析——TDD 01

TDD&#xff0c;测试驱动开发&#xff0c;英文全称Test-Driven Development&#xff0c;简称TDD&#xff0c;是一种不同于传统软件开发流程的新型的开发方法。它要求在编写某个功能的代码之前先编写测试代码&#xff0c;然后只编写使测试通过的功能代码&#xff0c;通过测试来推…

苹果和乔布斯的传奇故事,从车库创业到万亿市值巨头

苹果公司的品牌故事&#xff0c;就像一部充满创新、挑战与辉煌的科幻大片&#xff0c;让人目不暇接。 故事始于1976年&#xff0c;那时&#xff0c;年轻的史蒂夫乔布斯与斯蒂夫沃兹尼亚克在加州的一个简陋车库里&#xff0c;用他们的热情和智慧&#xff0c;捣鼓出了世界上第一…

python学习之闭包与装饰器

一、闭包 闭包允许一个函数访问并操作函数外部的变量&#xff08;即父级作用域中的变量&#xff09;&#xff0c;即使在该函数外部执行。 特性&#xff1a; (1)外部函数嵌套内部函数。 (2)外部函数可以返回内部函数。 (3)内部函数可以访问外部函数的局部变量。 def out()…

《昇思 25 天学习打卡营第 18 天 | 扩散模型(Diffusion Models) 》

《昇思 25 天学习打卡营第 18 天 | 扩散模型&#xff08;Diffusion Models&#xff09; 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 扩散模型&#xff08;Diffusion Models&#xff09; 扩散模型概述 扩散模…

linux中使用docker安装mongodb

随着容器的普及&#xff0c;越来越多服务都喜欢跑在容器中&#xff0c;并且安装也很方便快捷&#xff0c;接下来一起看下linux中使用docker来安装mongodb吧&#xff01; 1.首先安装docker&#xff1b; 使用Yum 进行安装&#xff0c;我安装docker比较喜欢参考阿里云中的安装步骤…

通过泛型+函数式编程封装成通用解决方案|缓存穿透、缓存击穿,缓存雪崩

缓存更新方法封装 用到了泛型、函数式编程。 使用函数式编程是因为我们这个是一个通用的工具&#xff0c;使用泛型&#xff08;泛型&#xff08;Generics&#xff09; 允许我们定义类、接口和方法&#xff0c;可以使用不同类型的参数进行操作&#xff09;可以实现数据类型的通…

Mem0 - 个人 AI 的内存层

文章目录 一、关于 Mem0核心功能&#x1f511;路线图 &#x1f5fa;️常见用例Mem0与RAG有何不同&#xff1f; 二、快速入门 &#x1f680;1、安装2、基本用法&#xff08;开源&#xff09;3、高级用法&#x1f527;4、大模型支持 三、MultiOn1、概览2、设置和配置4、将记忆添加…

鸿蒙仓颉语言【模块module】

module 模块 模块配置文件&#xff0c;这里指项目的modules.json 文件&#xff0c;用于描述代码项目的基础元属性。 {"name": "file name", //当前项目的名称"description": "项目描述", //项目描述"version": "1.0…

人工智能与机器学习原理精解【4】

文章目录 马尔科夫过程论要点理论基础σ代数定义性质应用例子总结 马尔可夫过程概述一、马尔可夫过程的原理二、马尔可夫过程的算法过程三、具体例子 马尔可夫链的状态转移概率矩阵一、确定马尔可夫链的状态空间二、收集状态转移数据三、计算转移频率四、构建状态转移概率矩阵示…

视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决

安防视频监控EasyCVR安防监控视频系统采用先进的网络传输技术&#xff0c;支持高清视频的接入和传输&#xff0c;能够满足大规模、高并发的远程监控需求。EasyCVR平台支持多种视频流的外部分发&#xff0c;如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WebRTC、fmp4等&#xf…

kafka基础介绍

一、为什么使用消息队列 1.使用同步的通信方式来解决多个服务之间的通信 同步的通信方式会存在性能和稳定性的问题。 2.使用异步的通信方式 针对于同步的通信方式来说,异步的方式,可以让上游快速成功,极大提高了系统的吞吐量。而且在分布式系统中,通过下游多个服务的 分布式事…

java爽看Stream

Java Stream MD笔记 一、Java Stream概念 Java Stream是Java 8引入的一种新的数据处理方式&#xff0c;提供了一种高效、便利的方法来处理集合数据。Stream流可以让开发人员以声明式的方式对数据进行操作&#xff0c;从而使代码更加简洁、易读。Stream本身不存储数据&#xf…

怎么拼接几张图片为一张?拼接几张图片为一张的四种方法推荐

怎么拼接几张图片为一张&#xff1f;要将几张图片拼接成一张完整的图像&#xff0c;你可以利用现代软件和工具来实现这一操作。这种技术可以帮助你创建更大、更复杂的图像&#xff0c;无论是为了美学上的需要还是为了展示更完整的视觉信息。通过合并多张图片&#xff0c;你可以…