uniapp组件库SwipeAction 滑动操作 使用方法

目录
#平台差异说明
#基本使用
#修改按钮样式
#点击事件
#API
#Props
#Event
该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。
注意
如果把该组件通过v-for用于左滑删除的列表,请保证循环的:key是一个唯一值,可以用数据的id或者title替代。 不能是数组循环的index,否则删除的时候,可能会出现数据错乱
#平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
#基本使用
- 通过slot传入内部内容即可,可以将
v-for的"index"索引值传递给index参数,用于点击时,在回调方法中对某一个数据进行操作(点击回调时第一个参数会返回此索引值) - 内部的按钮通过
options参数配置,此参数为一个数组,元素为对象,可以配置按钮的文字,背景颜色(建议只配置此两个参数即可),请勿配置宽高等属性。
说明:有时候,我们在打开一个swipeAction的同时,需要自动关闭其他的swipeAction,这时需要通过open事件实现,见如下:
<template><view><u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click" @open="open":options="options"><view class="item u-border-bottom"><image mode="aspectFill" :src="item.images" /><!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 --><view class="title-wrap"><text class="title u-line-2">{{ item.title }}</text></view></view></u-swipe-action></view>
</template><script>export default {data() {return {list: [{id: 1,title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false},{id: 2,title: '新丰绿树起黄埃,数骑渔阳探使回,霓裳一曲千峰上,舞破中原始下来',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false},{id: 3,title: '登临送目,正故国晚秋,天气初肃。千里澄江似练,翠峰如簇',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false,}],disabled: false,btnWidth: 180,show: false,options: [{text: '收藏',style: {backgroundColor: '#007aff'}},{text: '删除',style: {backgroundColor: '#dd524d'}}]};},methods: {click(index, index1) {if(index1 == 1) {this.list.splice(index, 1);this.$u.toast(`删除了第${index}个cell`);} else {this.list[index].show = false;this.$u.toast(`收藏成功`);}},// 如果打开一个的时候,不需要关闭其他,则无需实现本方法open(index) {// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,// 原本为'false',再次设置为'false'会无效this.list[index].show = true;this.list.map((val, idx) => {if(index != idx) this.list[idx].show = false;})}}};
</script><style lang="scss" scoped>.item {display: flex;padding: 20rpx;}image {width: 120rpx;flex: 0 0 120rpx;height: 120rpx;margin-right: 20rpx;border-radius: 12rpx;}.title {text-align: left;font-size: 28rpx;color: $u-content-color;margin-top: 20rpx;}
</style>
#修改按钮样式
- 通过
options参数配置按钮的数量和样式,见上方说明 - 通过
btn-width设置按钮的宽度,单位rpx
<u-swipe-action btn-width="180" :options="options">...
</u-swipe-action>
#点击事件
click点击事件回调中,有两个参数,第一个参数为通过Props传入的index参数,第二个参数为滑动按钮的索引,即options数组的索引, 用于标识第几个按钮被点击。
#API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| bg-color | 整个组件背景颜色 | String | #ffffff | - |
| index | 标识符,点击时候用于区分点击了哪一个,用v-for循环时的index即可 | String | Number | - | - |
| btn-width | 按钮宽度,单位rpx | String | Number | 180 | - |
| disabled | 是否禁止某个swipeAction滑动 | Boolean | false | true |
| vibrate-short | 是否使手机发生短促震动,目前只在iOS的微信小程序和微信小程序开发工具有效 | Boolean | false | true |
| show | 打开或者关闭某个组件 | Boolean | false | true |
| options | 按钮组的配置参数,数组形式,见上方说明 | Array | [ ] | - |
#Event
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击组件时触发 | (index1, index),见上方"点击事件"的说明 |
| close | 组件触发关闭状态时 | index: 通过props传递的index |
| open | 组件触发打开状态时 | index: 通过props传递的index |
| content-click | 点击内容时触发 | index: 通过props传递的index |
相关文章:
uniapp组件库SwipeAction 滑动操作 使用方法
目录 #平台差异说明 #基本使用 #修改按钮样式 #点击事件 #API #Props #Event 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。 注意 如果把该组件通过v-for用于左滑删除的列表,请保证循环的:key是一个唯一值,可以…...
YARN节点故障的容错方案
YARN节点故障的容错方案 1. RM高可用1.1 选主和HA切换逻辑 2. NM高可用2.1 感知NM节点异常2.2 异常NM上的任务处理 4. 疑问和思考4,1 RM感知NM异常需要10min,对于app来说是否太长了? 5. 参考文档 本文主要探讨yarn集群的高可用容错方案和容错能力的探讨。…...
C++后端笔记
C后端笔记 资源整理一、高级语言程序设计1.1 进制1.2 程序结构基本知识1.3 数据类型ASCII码命名规则变量间的赋值浮点型变量的作用字符变量常变量 const运算符 二、高级语言程序设计(荣) 资源整理 C后端开发学习路线及推荐学习时间 C基础知识大全 C那…...
JavaEE中什么是Web容器?
Web容器(也称为Servlet引擎)是一个用于执行Java Servlet和JSP的服务器端环境。它负责管理和执行在其上运行的Web应用程序。 Tomcat是Web容器 Apache Tomcat 是一个流行的开源的Web容器,它实现了Java Servlet和JavaServer Pages(…...
MySQL 8.0 架构 之错误日志文件(Error Log)(1)
文章目录 MySQL 8.0 架构 之错误日志文件(Error Log)(1)MySQL错误日志文件(Error Log)MySQL错误日志在哪里Window环境Linux环境 错误日志相关参数log_error_services 参考 【声明】文章仅供学习交流&#x…...
51单片机实验课一
实验任务一:实现控制8个发光管的亮(灭) #include <REGX52.H> void Delay1ms(unsigned int xms) //11.0592MHz {unsigned char i, j;while(xms){xms--;i 12;j 169;do{while (--j);} while (--i);} } void main() {while(1){P20;//八…...
【.NET Core】多线程之线程池(ThreadPool)详解(一)
【.NET Core】多线程之线程池(ThreadPool)详解(一) 文章目录 【.NET Core】多线程之线程池(ThreadPool)详解(一)一、概述二、线程池的应用范围三、线程池特性3.1 线程池线程中的异常…...
圆的参数方程是如何推导的?
圆的参数方程是如何推导的? 1. 圆的三种参数表示2. 三角函数万能公式3. 回到圆的参数方程1. 圆的三种参数表示 已知圆的第一种参数方程为: x 2 + y 2 = r x^2+y^2=r x2+y2=r 圆的图像如下: 通过上图,不难理解,圆的参数方程还可以用三角函数表示,也就是第二种参数表…...
sqlmap使用教程(2)-连接目标
目录 连接目标 1.1 设置认证信息 1.2 配置代理 1.3 Tor匿名网络 1.4 检测WAF/IPS 1.5 调整连接选项 1.6 处理连接错误 连接目标 场景1:通过代理网络上网,需要进行相应配置才可以成功访问目标主机 场景2:目标网站需要进行身份认证后才…...
c++ http第一个服务
c http第一个服务 一、下载相关依赖:这是一个git开源项目 代码仓地址 二、演示代码,编译参数:g test.cpp -I/**** -lpthread #include <httplib.h> using namespace httplib;void wuhan(const Request &req, Response &res) …...
深入Android S (12.0) 探索Framework之输入子系统InputReader的流程
Framework层之输入系统 第一篇 深入Android S (12.0) 探索Framework之输入系统IMS的构成与启动 第二篇 深入Android S (12.0) 探索Framework之输入子系统InputReader的流程 文章目录 Framework层之输入系统前言一、基础知识1、输入子系统2、INotify 与 Epoll2.1、INotify 机制…...
【cucumber】cluecumber-report-plugin生成测试报告
cluecumber为生成测试报告的第三方插件,可以生成html测报,该测报生成需以本地json测报的生成为基础。 所以需要在测试开始主文件标签CucumberOptions中,写入生成json报告。 2. pom xml文件中加入插件 <!-- 根据 cucumber json文件 美化测…...
华为欧拉操作系统结合内网穿透实现固定公网地址SSH远程连接
文章目录 1. 本地SSH连接测试2. openEuler安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 欧拉操作系统(openEuler, 简称“欧拉”)是面向数字基础设施的操作系统,支持服务器、云计算、边缘openEuler是面向数字基础设施的操作系…...
加速 Selenium 测试执行最佳实践
Selenium测试自动化的主要目的是加快测试过程。在大多数情况下,使用 Selenium 的自动化测试比手动测试执行得特别好。在实际自动化测试实践中,我们有很多方式可以加速Selenium用例的执行。 我们可以选择使用不同类型的等待、不同类型的 Web 定位器、不同…...
c语言野指针
系列文章目录 c语言野指针 c语言野指针 系列文章目录c语言野指针 c语言野指针 野指针可以用于破坏修改别人的内存空间,比如游戏外挂 野指针 野指针:野指针是指向一个未知的内存空间,在读写的时候出现错误。 0-255都是系统保留的 不可以读&am…...
【MySQL】where和having的区别
🍎个人博客:个人主页 🏆个人专栏:数据库 ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 用途: 使用位置: 操作对象: 聚合函数: 示例: 结语 我的其他博客 前言 数据库中的 WHERE 和 HAVING 子句在 SQL 查…...
npm pnpm yarn 报错或常见问题处理集锦
各种卡死,报错问题处理汇总 1. npm 安装 卡死了怎么办,npm # 切换源 npm config set registry https://registry.npmmirror.com # 查看源 npm config get registry2. pnpm安装 卡死了怎么办 方法1:切换源 npx pnpm config set registry h…...
【Git】常用的Git操作集合
常用的Git操作集合 1. 分支操作1.1 查看本地所有分支git branch 1.2 查看所有分支(包含本地远程仓库)git branch -a 1.3 切换分支git checkout test 2. 常用基本操作2.1 查看 git 各存储区内(文件)状态git status 2.2 查看工作区与暂存区文件差异git dif…...
JavaScript库jquery的使用方法
"写更少,做更多"是jquery的设计理念,jquery是一个兼容多浏览器的JavaScript库,利用jquery的语法设计能使开发更便捷。 网页添加jquery的方法:1.从jquery.com下载库;2.从CDN中载入库(示例使用)&a…...
Vue (v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现
V-bind指令 el与data两种写法 MVVM 数据代理 V-no事件处理 V-no用于监听DOM对象 双向数据绑定V-model v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。 按钮的…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
GAN模式奔溃的探讨论文综述(一)
简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...
