uniapp中uview组件库丰富的ActionSheet 操作菜单使用方法

目录

#平台差异说明

#基本使用

#配置顶部的提示信息和底部取消按钮

#如何知道点了第几项

#API

#Props

#Event


本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

  • 通过list设置需要显示的菜单,该值为一个数组,元素为对象,对象至少要提供text属性,另外可选的有fontSize(字体大小),color(颜色),disabled(是否禁用,1.5.6引入), subText(描述信息,1.6.8引入)
  • 通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起,v-model的值是双向绑定的
<template><view><u-action-sheet :list="list" v-model="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>export default {data() {return {list: [{text: '点赞',color: 'blue',fontSize: 28,subText: '感谢您的点赞'}, {text: '分享'}, {text: '评论' }],show: false}}}
</script>

#配置顶部的提示信息和底部取消按钮

  • tips参数为一个对象类型,属性可以设置textfontSize(字体大小),color(颜色),文本内容将会显示组件的上方,起提示作用。
  • cancel-btn参数配置是否显示底部的取消按钮,默认显示
<template><u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet>
</template><script>export default {data() {return {tips: {text: '在水一方',color: '#909399',fontSize: 24},list: [{text: '点赞',color: 'blue',fontSize: 28}],show: true}}}
</script>

#如何知道点了第几项

click回调事件带有一个index值,这个索引值为传递的list数组的索引值,根据回调事件,能获得点击了 第几项和该项的内容

<template><u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
</template><script>export default {data() {return {list: [{text: '点赞',color: 'blue',fontSize: 28}, {text: '分享'}, {text: '评论'}],show: true}},methods: {click(index) {console.log(`点击了第${index + 1}项,内容为:${this.list[index].text}`)}}}
</script>

#API

#Props

注意:props中没有控制组件弹出与收起的参数,因为这是通过v-model绑定变量实现的,见上方说明。

参数说明类型默认值可选值
list按钮的文字数组,见上方文档示例Array<Object>[ ]-
tips顶部的提示文字,见上方文档示例Object--
cancel-btn是否显示底部的取消按钮Booleantruefalse
border-radius弹出部分顶部左右的圆角值,单位rpxNumber \ String0-
mask-close-able点击遮罩是否可以关闭Booleantruefalse
safe-area-inset-bottom是否开启底部安全区适配Booleanfalsetrue
z-indexz-indexNumber \ String1075-
cancel-text 1.3.0取消按钮的提示文字String取消-

#Event

事件名说明回调参数版本
click点击ActionSheet列表项时触发index: 点击了第几个,从0开始-
close点击取消按钮时触发--

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

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

相关文章

使用知行之桥EDI系统的HTTP签名身份验证

本文简要概述了如何在知行之桥EDI系统中使用 HTTP 签名身份验证&#xff0c;并将使用 CyberSource 作为该集成的示例。 API 概述 API 是”应用编程接口”的缩写。这听起来可能很复杂&#xff0c;但它的真正含义是一种允许两个不同实体相互通信的软件。自开发以来&#xff0c;…

php内置函数-文件包含的函数

目录 1.include 2.require 3.include_once 4. require_once 1.include 可以将别的文件直接引用过来&#xff08;被引用的文件含有打印代码的话&#xff0c;会直接打印&#xff09;&#xff0c;如果失败了&#xff0c;会返回一条警告&#xff0c;文件会继续执行下去&#…

Skywalking UI页面中操作的各种实用功能汇总

刚刚接触skywalking不久&#xff0c;在这里总结一下在UI页面中操作的各种实用功能&#xff0c;随着使用的不断深入&#xff0c;我也会对文章进行持续补充。 本文skywalking 的ui入口是官方demo &#xff0c;版本是10.0.0-SNAPSHOT-593bd05 http://demo.skywalking.apache.org…

网络安全B模块(笔记详解)- 隐藏信息探索

隐藏信息探索 1.访问服务器的FTP服务,下载图片QR,从图片中获取flag,并将flag提交; ​ 通过windows电脑自带的图片编辑工具画图将打乱的二维码分割成四个部分,然后将四个部分通过旋转、移动拼接成正确的二维码 ​ 使用二维码扫描工具CQR.exe扫描该二维码 ​ 获得一串…

性能分析与调优: Linux 磁盘I/O 观测工具

目录 一、实验 1.环境 2.iostat 3.sar 4.pidstat 5.perf 6. biolatency 7. biosnoop 8.iotop、biotop 9.blktrace 10.bpftrace 11.smartctl 二、问题 1.如何查看PSI数据 2.iotop如何安装 3.smartctl如何使用 一、实验 1.环境 &#xff08;1&#xff09;主机 …

CentOS安装k8s单机/集群及一些命令

目录 前言 1. 安装docker 2. 安装要求 3.准备网络&#xff08;如果只装单机版可跳过此部&#xff09; 4. 准备工作 5. 安装 5.1. 配置阿里云yum k8s源 5.2 安装kubeadm、kubectl和kubelet 5.3 初始化&#xff0c;只在master执行&#xff0c;子节点不要执行 5.3.1 一些…

npm报错error:03000086:digital envelope routines::initialization error

1.可能是因为node版本过高&#xff0c;与现在的项目不符合 这是降低node版本的命令&#xff0c;然后重新运行 npm install npm8.1.2 -g 2.改下这个package.json "dev": "SET NODE_OPTIONS--openssl-legacy-provider && vue-cli-service serve",也…

编码器与解码器LLM全解析:掌握NLP核心技术的关键!

让我们深入了解&#xff1a;基于编码器和基于解码器的模型有什么区别&#xff1f; 编码器与解码器风格的Transformer 从根本上说&#xff0c;编码器和解码器风格的架构都使用相同的自注意力层来编码词汇标记。然而&#xff0c;主要区别在于编码器旨在学习可以用于各种预测建模…

【Android开发】不同Activity之间的数据回传实例(一)摘桃子游戏

一、功能介绍 该项目实现的功能主要有&#xff1a; 在首页显示一个按钮点击该按钮跳转到桃园页面在桃园页面&#xff0c;点击桃子会弹窗显示摘到几个桃子&#xff0c;同时被点击桃子消失&#xff0c;总桃子数1点击退出桃园会返回首页&#xff0c;首页桃子数会根据点击的桃子数…

数据结构与算法教程,数据结构C语言版教程!(第三部分、栈(Stack)和队列(Queue)详解)四

第三部分、栈(Stack)和队列(Queue)详解 栈和队列&#xff0c;严格意义上来说&#xff0c;也属于线性表&#xff0c;因为它们也都用于存储逻辑关系为 "一对一" 的数据&#xff0c;但由于它们比较特殊&#xff0c;因此将其单独作为一章&#xff0c;做重点讲解。 使用栈…

1.UnityProfiler性能分析提升性能

一 Stats重要参数详解 1.main thread 主线程 业务逻辑都在这里&#xff0c;我们调用Unity API都在这里&#xff1b;例如设置transform位置&#xff0c;main thread里面处理 2.render thread&#xff0c;渲染线程&#xff0c;负责渲染图像、执行渲染循环、处理GPU命令、帧同步。…

计算机网络系统结构-2020期末考试解析

【前言】 不知道为什么计算机网络一门课这么多兄弟&#xff0c;这份看着也像我们的学科&#xff0c;所以也做了。 一&#xff0e; 单选题&#xff08;每题 2 分&#xff0c;共 20 题&#xff0c;合计 40 分&#xff09; 1 、当数据由主机 A 发送到主机 B &#xff0c;不参…

机器学习_7、KNN

数据采用&#xff1a;电离层数据 KNN完整的代码电离层数据资源-CSDN文库 代码 import os import csv import numpy as np from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import …

ChatGPT可以帮你做什么?

学习 利用ChatGPT学习有很多&#xff0c;比如&#xff1a;语言学习、编程学习、论文学习拆解、推荐学习资源等&#xff0c;使用方法大同小异&#xff0c;这里以语言学习为例。 在开始前先给GPT充分的信息&#xff1a;&#xff08;举例&#xff09; 【角色】充当一名有丰富经验…

【分布式微服务专题】从单体到分布式(四、SpringCloud整合Sentinel)

目录 前言阅读对象阅读导航前置知识一、什么是服务雪崩1.1 基本介绍1.2 解决方案 二、什么是Sentinel2.1 基本介绍2.2 设计目的2.3 基本概念 三、Sentinel 功能和设计理念3.1 流量控制3.2 熔断降级3.3 系统负载保护 四、Sentinel 是如何工作的 笔记正文一、简单整合Sentinel1.1…

Zynq 电源

ZYNQ芯片的电源分PS系统部分和PL逻辑部分&#xff0c;两部分的电源分别是独立工作。PS系统部分的电源和PL逻辑部分的电源都有上电顺序&#xff0c;不正常的上电顺序可能会导致ARM系统和FPGA系统无法正常工作。 PS部分的电源有VCCPINT、VCCPAUX、VCCPLL和PS VCCO。 VCCPINT为PS内…

便捷好用的iOS文件管理App

便捷好用的iOS文件管理App 摘要 本文介绍了一款功能强大、免费的iOS文件管理App——克魔助手。通过使用克魔助手&#xff0c;用户可以轻松管理手机存储空间&#xff0c;清理垃圾文件&#xff0c;整理文件&#xff0c;并进行文件传输和截图操作。本文将详细介绍克魔助手的各项…

使用Sqoop将数据导入Hadoop的详细教程

在大数据处理中&#xff0c;Sqoop是一个强大的工具&#xff0c;它可以将关系型数据库中的数据导入到Hadoop生态系统中&#xff0c;以便进行进一步的分析和处理。本文将提供一个详细的教程&#xff0c;以帮助大家了解如何使用Sqoop将数据导入Hadoop。 准备工作 在开始之前&…

代码随想录 Leetcode707. 设计链表

题目&#xff1a; 代码(首刷看解析 2024年1月11日&#xff09;&#xff1a; class MyLinkedList { private:struct ListNode{int val;ListNode* next;ListNode(int val):val(val),next(nullptr){}};int size;ListNode* dummyHead; public:MyLinkedList() {dummyHead new List…

【算法】增减序列(贪心,差分)

题目 给定一个长度为 n 的数列 a1,a2,…,an&#xff0c;每次可以选择一个区间 [l,r]&#xff0c;使下标在这个区间内的数都加一或者都减一。 求至少需要多少次操作才能使数列中的所有数都一样&#xff0c;并求出在保证最少次数的前提下&#xff0c;最终得到的数列可能有多少种…