uni-app的组件(二)

多项选择器checkbox-group

多项选择器,内部由多个 checkbox 组成。

		<checkbox-group><checkbox checked color="red" value="1"></checkbox> 篮球<!-- disabled:是否禁用 --><checkbox disabled color="rgba(0,0,0,0.5)" value="2"></checkbox> 足球<checkbox color="rgb(0,0,0)" value="3"></checkbox> 排球</checkbox-group>

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名类型默认值说明
checkedBooleanfalse当前是否选中,可用来设置默认选中
disabledBooleanfalse是否禁用
colorcolorcheckbox的颜色,同css的color

效果图展示

在这里插入图片描述

单行输入框input

		<input type="text" placeholder="给个提示"><input type="text" v-model="msg"><input type="text" :value="msg"><!-- password:密码格式 maxlength:设置最大数 --><input type="text" password value="123456" maxlength="6">

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名类型默认值说明
valueString输入框的初始内容
placeholderString输入框为空时占位符
typeStringtextinput 的类型 [有效值]
v-modelString数据绑定
:valueString数据绑定
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度
passwordBooleanfalse是否是密码类型

效果图展示

在这里插入图片描述

单项选择器radio-group

单项选择器,内部由多个 radio 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

		<radio-group @change="handlechange"><radio value="1" disabled ></radio>篮球<radio value="2" checked color="red"></radio>足球<radio value="3"></radio>乒乓球<radio value="4"></radio>排球</radio-group>

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名类型默认值说明
valueStringradio 标识。当该 radio 选中时,radio 的 change 事件会携带 radio 的 value
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中

效果图展示

在这里插入图片描述

滑动条slider

滑动选择器

		<view ><view>{{slidervalue}}</view><slider @changing="sliderChange" min="0" max="100" value="0" step="1"/></view>

属性说明(查看更多属性请查看官网 [| uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
valueNumber0当前取值
stepNumber1步长,取值必须大于 0,并且可被(max - min)整除

效果图展示(设置滑动条 @change:不是实时改变的 @changing:滑动条的位置实时改变)

在这里插入图片描述

滚动选择器picker-view

嵌入页面的滚动选择器。

相对于picker组件,picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时,往往需要使用picker-view

		<view><view class="uni-padding-wrap"><view class="uni-title">日期:{{year}}年{{month}}月{{day}}日</view></view><picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"class="picker-view"><picker-view-column><view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view></picker-view-column><picker-view-column><view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view></picker-view-column><picker-view-column><view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view></picker-view-column></picker-view></view>

属性说明(查看更多请查看官网picker-view | uni-app官网 (dcloud.net.cn) )

属性名类型默认值
valueArray<Number>数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-styleString设置选择器中间选中框的样式

script部分

<script>export default {data: function () {const date = new Date()const years = []const year = date.getFullYear()const months = []const month = date.getMonth() + 1const days = []const day = date.getDate()for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)}for (let i = 1; i <= 12; i++) {months.push(i)}for (let i = 1; i <= 31; i++) {days.push(i)}return {title: 'picker-view',years,year,months,month,days,day,value: [9999, month - 1, day - 1],visible: true,indicatorStyle: `height: 50px;`}},methods: {bindChange: function (e) {const val = e.detail.valuethis.year = this.years[val[0]]this.month = this.months[val[1]]this.day = this.days[val[2]]}}}
</script>

在这里插入图片描述

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

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

相关文章

计算机系统基础知识揭秘:硬件、处理器和校验码

计算机系统基础知识揭秘&#xff1a;硬件、处理器和校验码 一、计算机系统基础知识的重要性二、计算机系统硬件2.1、内存和存储设备2.2、输入输出设备 三、中央处理器&#xff08;CPU&#xff09;3.1、运算器3.2、控制器3.3、寄存器组3.4、多核CPU 四、数据表示4.1、原码、反码…

大数据 - Kafka系列《一》- Kafka基本概念

目录 &#x1f436;1.1 什么是kafka &#x1f436;1.2 Kafka可以用来做什么 &#x1f436;1.3 kafka的特点 &#x1f959;1. 高吞吐量、低延迟 &#x1f959;2. 可扩展性 &#x1f959;3. 持久性、可靠性 &#x1f959;4. 容错性 &#x1f959;5. 高并发 &#x1f436…

LINUX基础培训十之服务管理

前言、本章学习目标 了解LINUX中的服务种类了解LINUX中常见服务的端口熟悉服务的日常管理掌握添加自定义服务 一、Linux系统服务含义及其分类 系统服务是在后台运行的应用程序&#xff0c;并且可以提供一些本地系统或网络的功能。我们把这些应用程序称作服务&#xff0c;也…

【Docker】网络模式详解及容器间网络通信

目录 一、概述 二、默认网络 三、网络模式及应用 1. Bridge模式 2. Host模式 3. none网络模式 四、自定义网络应用 1. 网络相连 2. 自定义通讯 3. 自定义IP 每篇一获 一、概述 在 Docker 中&#xff0c;网络设置包括 IP 地址、子网掩码、网关、DNS 和端口号等关键组…

Unity中图片合成图集Editor工具

一般图片合成图集用的是Unity自带的SpriteAtlas类添加一个Sprite集合&#xff0c;而所有图片保存在Sprite集合中&#xff0c;然后把Sprite通过Add方法添加到SpriteAtlas类&#xff0c;通过AssetDatabase.CreateAsset()方法来创建图集。

C语言通过MSXML6.0读写XML文件(同时支持char[]和wchar_t[]字符数组)

开发环境&#xff1a;Visual Studio 2010 运行环境&#xff1a;Windows XP SP3 第一节 读取XML文件&#xff08;使用wchar_t[]字符数组&#xff09; /* 这个程序只能在C编译器下编译成功, 请确保源文件的扩展名为c */ #define COBJMACROS #include <stdio.h> #include …

AM5-DB低压备自投装置在河北冠益荣信科技公司洞庭变电站工程中的应用

摘 要&#xff1a;随着电力需求的不断增加&#xff0c;电力系统供电可靠性要求越来越高&#xff0c;许多供电系统已具备两回或多回供电线路。备用电源自动投入装置可以有效提高供电的可靠性&#xff0c;该类装置能够在工作电源因故障断开后&#xff0c;自动且迅速地将备用电源投…

C++设计模式(李建忠)笔记3

C设计模式&#xff08;李建忠&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 参考链接 Youtube: C设计模式 Gtihub源码与PPT&#xff1a;https://github.com/ZachL1/Bilibili-plus 豆瓣: 设计模式–可复用面向对象软件的基础 文章目录 C设计模…

Nodejs 第三十二章(数据库)

MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它是最受欢迎的数据库系统之一。MySQL广泛用于Web应用程序和其他需要可靠数据存储的应用程序中。 以下是MySQL数据库的一些重要特点和概念&#xff1a; 数据库&#xff1a;MySQL是一个数据库…

龙腾荆楚 | 软件供应链安全检测中心落地襄阳

1月16日&#xff0c;襄阳市东津新区“园区提质、企业满园”行动暨2024年东津云谷首月重大项目集中签约活动圆满完成&#xff0c;开源网安城市级项目再下一城&#xff0c;分别与襄阳市政府、高校、国投签订战略合作协议&#xff0c;推动荆楚地区数字政府、数字经济、数字社会、数…

【MATLAB源码-第115期】基于matlab的QSM正交空间调制系统仿真,输出误码率曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 正交空间调制&#xff08;QSM&#xff09;是一种先进的无线通信技术&#xff0c;它通过利用发射端的多天线阵列来传输信息&#xff0c;从而提高了数据传输的效率和速率。这种技术的关键在于它使用天线阵列的空间特性来编码额…

情人节专属--html5 canvas制作情人节告白爱心动画特效

💖效果展示 💖html展示 <!doctype html> <html> <head> <meta charset=

maven 配置http私服Since Maven 3.8.1 http repositories are blocked. 报错处理

刷maven报错 com.saas:pdf:pom:0.0.1 failed to transfer from http://0.0.0.0/ during a previous attempt. This failure was cached in the local repository and resolution is not reattempted until the update interval of maven-default-http-blocker has elapsed or …

七陌API对接实战:外呼接口及通话记录推送

通过白码低代码开发平台对接七陌外呼接口&#xff0c;实现选择客户进行外呼&#xff0c;并保存通话记录的功能。 外呼接口实现&#xff1a; 官方接口文档&#xff1a;http://developer.7moor.com/v2docs/dialout/ 1、对接数据查询 向七陌商务索取到七陌用户中心账号密码&a…

7.5 MySQL对数据的增改删操作(❤❤❤)

7.5 MySQL对数据的基本操作 1. 提要2. 数据添加2.1 insert语法2.2 insert 子查询2.3 ignore关键字 3. 数据修改3.1 update语句3.2 update表连接 4. 数据删除4.1 delete语句4.2 delete表连接4.3 快速删除数据表全部数据 1. 提要 2. 数据添加 2.1 insert语法 2.2 insert 子查询 …

Python 一行命令部署http、ftp服务

Python 一行命令部署http服务 文章目录 Python 一行命令部署http服务具体操作命令如下浏览器返回下载Python 一行命令部署FTP服务 具体操作命令如下 这个比nginx相对来说更加简单&#xff0c;可以用于部署特殊场景时如银行等部署时&#xff0c;各种权限控制&#xff0c;内网之间…

使用宝塔面板部署后端项目到服务器

文章目录 前言第一步&#xff1a;安装数据库第二步&#xff1a;打包后端项目第三步&#xff1a;配置数据库第四步&#xff1a;部署后端项目第五步&#xff1a;前后端联调测试总结 前言 在之前我已经写了一篇如何去部署前端项目&#xff0c;虽然能访问网站&#xff0c;但是没有…

Kafka 消息不能正常消费问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…

Modelsim SE 10.5安装教程

ModelSim 是一种功能强大的硬件描述语言 (HDL&#xff0c;Hardware Description Language) 仿真和验证工具&#xff0c;可以单独仿真&#xff0c;也可以联合Quartus/Vivado等软件联合仿真&#xff0c;仿真速度快&#xff0c;广泛应用于数字电路设计和验证领域。 大学老师爱教VH…

图像识别,很强,专业以图搜图小软件!

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; ImageSearch v1.12最新版是一款功能强大且免费开源的工具&#xff0c;专注于通过算法实现本地电脑的图像搜索功能&#xff0c;无需依赖AI技术。它的操…