微信小程序的页面制作---常用组件及其属性2

一、标签栏taBar

在全局配置文件app.json中添加taBar配置,可实现标签栏配置。标签栏最少2个,最多5个

(1)如何配置标签栏?

1》先建多个文件,(以我的index,list,myform文件夹为例)

2》在app.json这个全局配置文件里面配置taBar,(必填taBar配置项——color、selectedColor、backgroundColor、list)

3》在我们创建的每个文件夹的json和wxml里写好配置代码,即可编写不同的tabar页面(以我的myform文件夹为例)

我在myform.wxml里写好了一个简单的表单,配置好json页面,效果如图所示:

二、taBar配置项属性 (*为必填项)

*(1)color                     (Hexcolor型)          标签栏上的文字默认颜色

*(2)selectedColor       (Hexcolor型)         标签栏上的文字选中时的颜色

*(3)backgroundColor  (Hexcolor型)         标签栏的背景色

*(4)list                         (Array型)               标签栏的列表

(5)borderStyle            (string型)               标签栏边框的颜色。只有white和black

(6)position                  (string型)               标签栏的位置。仅支持bottom和top

(7)custom                  (boolean型)           自定义标签栏

三、taBar按钮的相关属性 (*为必填项)

*(1)pagePath      (string型)       页面路径,页面文件夹必须在pages数组中预先定义(也就是点击标签后跳到哪个页面)

*(2)text                     (string型)   标签按钮上的文字

(3)iconPath              (string型) 未选中时的图标路径。当position属性值为top时,不显示图标

(4)selectedlconPath (string型)  选中时的图标路径。当position属性值为top时,不显示图标

四、video视频组件

video组件默认宽度为300px,高度为225px

常用属性:

(1)src              (string型)      视频资源地址

(2)duration     (number型)   指定视频时长

(3)controls     (boolean型)   是否显示默认播放控件(播放/暂停按钮,播放进度,时间)

(4)danmu-list  (object型)     弹幕列表是一个数组

(5)danmu-btn  (bolean型)   是否显示弹幕按钮,布尔值,默认false

五、表单

注意:输入框input是不带有border的,要显示border需自己添加style

表单组件:

(1)input组件:

属性值:text(文本输入)、number(数字输入)、idcard(身份证输入)、digit(带小数点的数字)、safe-password(密码安全输入)、nickname(昵称输入)

(2)buttom组件:

属性值:size:default(默认大小)、mini(小尺寸)

style:primary(绿色)、default(白色)、warn(红色)

(3)radio-group组件:

<radio>为单选框组件,往往需配合<radio-group>组件来使用,<radio>标签嵌套在<radio-group>当中

子项目radio属性:value、checked、disabled、color

(4)checkbox-group组件:

<checkbox>为复选框组件,常用于在表单中进行多项数据的选择。复选框的<checkbox-group>为父控件,其内部嵌套若干个<checkbox>子控件。

子项目checkbox属性:value、checked、disabled、color

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

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

相关文章

最近很火的游戏,人渣/SCUM(更新V0.9.517.81845)

包含DLC • SCUM Deluxe • SCUM Deluxe 2 • SCUM Danny Trejo • SCUM Hair Deluxe 1 • SCUM Luis Moncada • SCUM Charms 1 • SCUM Weapon Skins 1 中文设置 OPTIONS-LANGUAGE-中文(简体) 特别提示 • 通过“\SCUM\Binaries\Win64\SCUM.exe”启动游戏 • 如果…

Microsoft Excel 快捷键 (keyboard shortcut - hotkey)

Microsoft Excel 快捷键 [keyboard shortcut - hotkey] References 表格内部换行快捷键 Alt Enter 快速将光标移到表末 Ctrl End 快速将光标移到表首 Ctrl Home References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

人工智能(Educoder)-- 搜索技术 -- 盲目式搜索

第1关&#xff1a;盲目搜索之宽度优先搜索算法 任务描述 本关任务&#xff1a;给定迷宫地图以及在迷宫中的起始位置&#xff0c;利用宽度优先搜索算法求解走出迷宫的最短路径长度&#xff0c;走出迷宫意味着达到迷宫地图的边界&#xff08;所有位置下标0开始&#xff09;。 …

Dockerfile, nginx.conf文件解读

Dockerfile文件 FROM registry.tongdun.me/library/alpine3-nginx:1.0 ENV APPNAMEedith-frontendADD nginx.conf /etc/nginx/ ADD ok.htm /home/admin/ RUN mkdir /home/admin/dist COPY /dist/ /home/admin/dist/ RUN mkdir /home/admin/nginx RUN mkdir /home/admin/nginx/…

水电站泄洪预警广播系统方案

一、行业背景 近年来由于危险河道管理措施不到位&#xff0c;调峰电站泄水风险长期存在&#xff0c;信息通报制度缺失以及民众安全警觉性不高等因素导致的水电站在泄洪时冲走下游河道游客以及人民财产的事故频发。 我司通过物联网、云计算、大数据、人工智能等技术手段&#x…

【电脑装机】笔记本开机启动快捷键汇总

联想 Lenovo 和 ThinkPad 笔记本&#xff1a; 启动项界面快捷键&#xff1a;F12 或者 F2 进 BIOS 快捷键&#xff1a;F2 或者 FnF2 戴尔 Dell 笔记本&#xff1a; 启动项界面快捷键&#xff1a;F12 进 BIOS 快捷键&#xff1a;F2 或者 FnF2 惠普 HP 笔记本&#xff1a; 启…

不能从所选图层建立3d模型--模大狮模型网

在Revit中&#xff0c;从所选图层直接创建3D模型并不是一个常规的操作方式。通常情况下&#xff0c;你需要手动创建文字或者图形&#xff0c;然后将其转换为3D模型。 如果你有一个平面上的文字或图形&#xff0c;想要将其转换为3D模型&#xff0c;你可以使用以下步骤&#xff1…

什么是虚拟线程?

1、典型回答 Java 中的虚拟线程&#xff0c;也叫做协程或“轻量级线程”&#xff0c;它诞生于JDK 19(预览 API)&#xff0c;正式发布于 JDK 21&#xff0c;它是一种在 Java 虚拟机(JVM)层面实现的逻辑线程&#xff0c;不直接和操作系统的物理线程一一对应&#xff0c;因此它可…

文献速递:基于SAM的医学图像分割---SAM-Med2D

Title 题目 SAM-Med2D 01 文献速递介绍 医学图像分割在通过识别和勾画各种组织、器官或感兴趣区域来分析医学图像中发挥着至关重要的作用。准确的分割可以帮助医生精确识别和定位病理区域&#xff0c;从而实现更准确的诊断和治疗。此外&#xff0c;对医学图像进行定量和定性…

Node.js之沙盒专题

​ Node.js一直是薄弱项&#xff0c;今天特意整理一下&#xff0c;基本上是各个大佬写的大杂烩&#xff0c;仅用于学习记录~~~ 1. child_process 首先介绍一下nodejs中用来执行系统命令的模块child_process。Nodejs通过使用child_process模块来生成多个子进程来处理其他事物…

简化业务流程,AppLink连接一定签

APPlink是什么 APPlink是RestCloud打造的一款简单易用的零代码自动化集成平台&#xff0c;为业务流程提供自动化的解决方案&#xff0c;将企业内部的核心系统以及第三方应用程序和云服务等进行集成。无论是开发人员还是业务人员&#xff0c;都可以使用APPlink轻松构建出高效、…

【触想智能】工业触摸一体机九大常见故障检测方法分享

工业触摸一体机目前在社会生产中应用非常广泛&#xff0c;比如智能化的生产车间、城市智慧安防监控中心都经常用到工业触摸一体机。 电子产品在使用中难免会出现一些故障&#xff0c;工业触摸一体机也不例外。那么我们在使用工业触摸一体机的时遇到问题怎么办呢?下面小编给大家…

Python从入门到精通秘籍十九

一、Python之union 联合类型注释 当谈论Python中的联合类型注释时&#xff0c;通常会提到Union类型。Union是typing模块中定义的一个泛型类&#xff0c;用于表示多个可能的类型。 Union的语法如下&#xff1a; Union[type1, type2, ...]其中type1, type2, … 是要组成联合类…

第十九章 linux部署scrapyd

文章目录 1. linux部署python环境1. 部署python源文件环境2. 下载python3. 解压安装包4. 安装5. 配置环境变量6. 检查是否安装成功7. 准备python使用的包8. 安装scrapyd9. 配置scrapyd10. 开放6800端口 2. 部署gerapy1. 本机下载包2. 初始化3. 进入gerapy同步数据库4. 创建用户…

类。。。。。。

类的访问权限 类的成员有三种访问权限&#xff1a;public、private 和 protected&#xff0c;分别表示公有的、私有的和受保护的。 在类的内部&#xff08;类的成员函数中&#xff09;&#xff0c;无论成员被声明为 public 还是 private&#xff0c;都是可以访问。 在类的外…

nginx启停操作

一、nginx启动 方式一&#xff1a; /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf方式二&#xff1a; systemctl start nginx 查看进程启动状态 ps -ef | grep nginx 上图表示nginx进程启动成功&#xff0c;进程号为30034为主进程(负责链接操作)&am…

2024/3/24--爬虫库

1.常用的爬虫库 (1)在setting的project里面点击Python Interpreter (2&#xff09;常用的爬虫库有 import requests //用途&#xff1a;用于发送HTTP请求。from bs4 import BeautifulSoup //用于从HTML或XML文档中提取数据。import scrapy //一个功能强大的爬虫框架&#xf…

基于 C++ STL 的图书管理系统213行

定制魏&#xff1a;QTWZPW&#xff0c;获取更多源码等 目录 一、实践项目名称 二、实践目的 三、实践要求 四、实践内容 五、代码框架参考 六、代码效果展示 七、完整代码主函数展示 一、实践项目名称 基于 C STL 的图书管理系统 二、实践目的 通过设计和实现一个基于…

AI之Suno:Suno V3的简介、安装和使用方法、案例应用之详细攻略

AI之Suno&#xff1a;Suno V3的简介、安装和使用方法、案例应用之详细攻略 目录 Suno AI的简介 1、特点与改进&#xff1a; Suno AI的安装和使用方法 1、第一步&#xff0c;让国产大模型—ChatGLM4帮我写一个提示词 2、第二步&#xff0c;将提示词交给Suno v3&#xff0c;…

优秀学员作品:SpringBoot茶叶商城系统源码+运行教程+开发文档(参考论文)

今天发布的是由【猿来入此】的优秀学员独立做的一个基于springboot脚手架的茶叶商城系统&#xff0c;主要实现了茶叶采购&#xff0c;出售茶叶的流程&#xff0c;除基础脚手架外&#xff0c;实现的功能有&#xff1a; 前台 &#xff1a; 首页、商品列表、新闻列表、个人中心、…