taro框架之taro-ui中AtSwipeAction的使用

news2024/11/17 0:28:45

题记:所需效果:滑动删除

工作进程 

官网文档代码

<AtSwipeAction options={[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]}>
  <View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>

发现写了没有效果,需要增加两个属性

maxDistance、areaWidth

<AtSwipeAction 
  maxDistance={80}  
 areaWidth={Taro.getSystemInfoSync().windowWidth*0.88} // 适配不同手机系统屏幕宽度
 
  options={[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]}>
  <View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>

还要注意<AtSwipeAction> 父组件的定位不要为 absolute ,这个是非常重要的。

下边是工作的一个案例代码

{
                        showList.length>0?
                        showList.map((item) => {
                            return(
                                <View className='mainBoxItem' key={item.time}>
                                    <AtSwipeAction
                                        autoClose
                                        maxDistance={80}  
                                        areaWidth={Taro.getSystemInfoSync().windowWidth*0.88}
                                        options={[
                                        {
                                            text: '删除',
                                            style: {
                                                backgroundColor: '#FF4949'
                                            }
                                        }
                                        ]}
                                        onClick={this.deleteClick.bind(this,item)}
                                    >
                                        <View className='normal' onClick={this.subscribeDetail.bind(this,item)}>
                                            <View className='boxItem'>
                                                {
                                                    item.resourceImgs === null ?
                                                    <View className='imageBox1'>暂无图片</View>:
                                                    <Image className='imageBox' src={item.resourceImgs} />
                                                }
                                                <View className='content'>
                                                    <View className='contentTop'>{item.resourceTypes}</View>
                                                    <View className='contentBottom'>预约日期:{item.appointTime}</View>
                                                </View>
                                                <View className='contentFix' style={{background:item.changeColor}}>{item.statusContent}</View>
                                            </View>
                                        </View>
                                    </AtSwipeAction>
                                </View>
                            )
                        })
                        : 
                        <View className='none'>
                            <View  className='img' >
                                <Image src={none} className='pic'></Image>
                            </View>
                            <View className='noText'>暂无数据</View>
                        </View>
                    }

接下来的属性的介绍

isOpened

是否开启  Boolean 默认值:true

disabled 

是否禁止滑动  Boolean  默认值:false

 autoClose

点击选项时,是否自动关闭  Boolean 默认值:false

options 

展示的选项数组  [{ text , style? , className? }]  []

 onClick

点击触发事件

onOpened 

完全打开时触发

onClosed 

完全关闭时触发

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1541012.html

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

相关文章

Vue 3 里的 onMounted 怎么用?

疑问 最近&#xff0c;一直在学习 Vue 3&#xff0c;此前我不懂前端&#xff0c;也没写过 Vue 2&#xff0c;所以是从 0 开始学习 Vue 3 的。很多对普通人不是疑问的&#xff0c;在我这里也会不太清楚。 我在写项目的时候&#xff0c;常见的一种场景是这样的&#xff1a;页面…

Excel通过下拉菜单,显示不同图片

背景&#xff1a;有的时候需要通过更改下拉菜单来改变对应的 值/ 图片。 如果是数值的话就是我们常常用的Vlookup&#xff0c;这个可以很简单的实现这个功能。&#xff08;这个如果不知道请自行百度&#xff09; 但是如果是图片呢&#xff1f;这个就不常见了&#xff0c;那么…

41 物体检测和目标检测数据集【李沐动手学深度学习v2课程笔记】

目录 1. 物体检测 2. 边缘框实现 3.数据集 4. 小结 1. 物体检测 2. 边缘框实现 %matplotlib inline import torch from d2l import torch as d2ld2l.set_figsize() img d2l.plt.imread(../img/catdog.jpg) d2l.plt.imshow(img);#save def box_corner_to_center(boxes):&q…

企业计算机服务器中了mkp勒索病毒怎么办,mkp勒索病毒解密流程步骤

在网络技术飞速发展的今天&#xff0c;越来越多的企业走向了数字化办公模式&#xff0c;网络为企业的生产运营提高了效率&#xff0c;为企业带来了极大便利&#xff0c;但网络是一把双刃剑&#xff0c;在为人们提供便利的同时也会带来数据安全问题&#xff0c;网络数据安全一直…

NFS网络文件系统

目录 简介 案例 配置autofs自动挂载 客户端配置autofs 简介 NFS&#xff08;Network File System&#xff0c;网络文件系统&#xff09;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计算机&#xff08;不同的计算机、不同的操作系统&#xff09;之间通过TCP/I…

每日一题 --- 螺旋矩阵 II[力扣][Go]

螺旋矩阵 II 题目&#xff1a;59. 螺旋矩阵 II - 力扣&#xff08;LeetCode&#xff09; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出…

vulhub打靶记录——cengbox

文章目录 主机发现端口扫描搜索SSH EXPweb渗透nikto扫描目录扫描登录网站后台提权 主机发现 使用nmap扫描局域网内存活的主机&#xff0c;命令如下&#xff1a; nmap -sP 192.168.56.0/24192.168.56.1&#xff1a;主机IP&#xff1b;192.168.56.100&#xff1a;DHCP服务器IP&…

SpringCloud-Gateway服务网关

一、网关介绍 1. 为什么需要网关 Gateway网关是我们服务的守门神&#xff0c;所有微服务的统一入口。 网关的核心功能特性&#xff1a; 请求路由 权限控制 限流 架构图&#xff1a; 权限控制&#xff1a;网关作为微服务入口&#xff0c;需要校验用户是是否有请求资格&am…

windows 系统下(nacos1.x) nacos-1.1.3 链接数据库 mysql8.0 出错分析

** windows 系统下&#xff08;nacos1.x&#xff09; nacos-1.1.3 链接数据库 mysql8.0 出错分析 ** 1、首先以下方法亲测无效&#xff1a; 1&#xff09;需要在数据库 URL 链接配置信息中 添加 allowPublicKeyRetrievaltrue 无效 db.url.0**&allowPublicKeyRetrievalt…

基于python+vue城市交通管理系统的设计与实现flask-django-php-nodejs

此系统设计主要采用的是python语言来进行开发&#xff0c;采用django/flask框架技术&#xff0c;框架分为三层&#xff0c;分别是控制层Controller&#xff0c;业务处理层Service&#xff0c;持久层dao&#xff0c;能够采用多层次管理开发&#xff0c;对于各个模块设计制作有一…

正弦实时数据库(SinRTDB)简介

正弦实时数据库是长沙巨松软件科技有限公司为了解决工业传感器产生的海量数值型数据的存储、计算等需求而研发的产品。广泛应用于电力、冶金、石油、化工、燃气等多个领域。 正弦实时数据库的主要特点如下&#xff1a; 性能 单机支持管理一百万标签点。单机支持并发用户数超…

【理解机器学习算法】之Clustering算法(K-Means)

实现 K-means 聚类从零开始涉及几个关键步骤&#xff1a;初始化质心、将点分配给最近的质心、根据分配更新质心&#xff0c;以及重复这个过程直到收敛。这里是一个基本的 Python 实现&#xff1a; K-means 算法步骤&#xff1a; 初始化质心&#xff1a;从数据点中随机选择 k …

走迷宫----bfs再矩阵图里的应用模版

对于之前走迷宫的那个题 回忆一下dfs的代码 #include <bits/stdc.h> using namespace std; int a[110][110]; bool check[110][110]; int n,m; int ans1e9; int nxt[4][2]{{1,0},{0,-1},{-1,0},{0,1}}; void dfs(int x,int y,int step){if(xn&&ym){ansmin(ans,…

linux系统------------Mysql数据库介绍、编译安装

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

sqlalchemy和moke生成实体类(一)

前言 如果通过java生成实体类&#xff0c;可以通过mybatis或者mybatis-plus的generator。 而sqlalchemy也可以生成实体类&#xff0c;通过sqlalcodegen或者flask-sqlalcodegen。 使用flask-sqlalcodegen生成实体类 建表 建立学生表&#xff0c;如下。 create table stude…

Web前端全栈HTML5通向大神之路

本套课程共三大阶段&#xff0c;六大部分&#xff0c;是WEB前端、混合开发与全栈开发必须要掌握的技能&#xff0c;从基础到实践&#xff0c;是从编程小白成长为全栈大神的最佳教程&#xff01; 链接&#xff1a;https://pan.baidu.com/s/1S_8DCORz0N2ZCdtJg0gHsw?pwdtjyv 提取…

minio基本使用

直接docker润起来&#xff08;其实是我用服务器运行一早上&#xff0c;没成功.......................&#xff09; docker run \-p 9000:9000 \-p 9001:9001 \--user $(id -u):$(id -g) \--name minio1 \-e "MINIO_ROOT_USERROOTUSER" \-e "MINIO_ROOT_PASSWOR…

☆【前后缀】【双指针】Leetcode 42. 接雨水

【前后缀】【双指针】Leetcode 42. 接雨水 解法1 前后缀分解解法2 双指针 ---------------&#x1f388;&#x1f388;42. 接雨水 题目链接&#x1f388;&#x1f388;------------------- 解法1 前后缀分解 维护一个前缀&#xff08;左侧最高&#xff09;后缀&#xff08;右侧…

深度学习 tablent表格识别实践记录

下载代码&#xff1a;https://github.com/asagar60/TableNet-pytorch 下载模型&#xff1a;https://drive.usercontent.google.com/download?id13eDDMHbxHaeBbkIsQ7RSgyaf6DSx9io1&exportdownload&confirmt&uuid1bf2e85f-5a4f-4ce8-976c-395d865a3c37 原理&#…

《算法王晓东》多处最优服务次序问题

多处最优服务次序问题 题目描述 设有n个顾客同时等待一项服务。顾客i需要的服务时间为ti, 1≤i≤n。共有s处可以提供此项服务。应如何安排n个顾客的服务次序才能使平均等待时间达到最小? 平均等待时间是n个顾客等待服务时间的总和除以n。 算法设计&#xff1a;对于给定的n个顾…