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 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。 按钮的…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
