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

news2025/2/1 6:08:22

一、标签栏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.coloradmin.cn/o/1555624.html

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

相关文章

民航电子数据库:CAEMigrator迁移数据库时总是卡死

目录 一、场景二、异常情况三、排查四、应急方案 一、场景 1、对接民航电子数据库 2、将mysql数据库迁移到cae数据库 3、使用CAEMigrator迁移工具进行数据库迁移时&#xff0c;该工具会卡死&#xff08;不清楚是否是部署cae服务的服务器资源导致&#xff09; 二、异常情况 …

【服务端】node.js详细的配置

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

《剑指 Offer》专项突破版 - 面试题 95、96 和 97 : 和动态规划相关的双序列问题(C++ 实现)

目录 前言 面试题 95 : 最长公共子序列 面试题 96 : 字符串交织 面试题 97 : 子序列的数目 前言 和单序列问题不同&#xff0c;双序列问题的输入有两个或更多的序列&#xff0c;通常是两个字符串或数组。由于输入是两个序列&#xff0c;因此状态转移方程通常有两个参数&am…

持续交付/持续部署流程主要系统构成(CD)

目录 一、概述 二、持续交付/持续部署主要构成 2.1 镜像容器管理系统 2.1.1 镜像分类 2.1.1.1 磁盘镜像 2.1.1.2 镜像容器 2.1.1.2.1 镜像容器分层管理示意图 2.1.2 镜像容器管理系统软件 2.2 配置管理系统 2.2.1 配置管理系统的功能 2.2.1.1 管理操作系统层、中间件…

goland annotate置灰点不动问题解决

goland 项目突然看不到左侧边栏提交记录&#xff0c;annotate按钮灰色不可点击&#xff0c;右键菜单也没有git&#xff0c;尝试各种方法终于解决。 原因是项目使用的非安全模式启动。 C:\Users\用户名\AppData\Roaming\JetBrains\GoLand2022.3\options 路径下的 trusted-path…

java分割回文串(力扣Leetcode131)

分割回文串 力扣原题链接 问题描述 给定一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文串。返回 s 所有可能的分割方案。 示例 示例 1: 输入&#xff1a;s “aab” 输出&#xff1a;[[“a”,“a”,“b”],[“aa”,“b”]] 示例 2: 输…

第十四届蓝桥杯省赛C++ B组所有题目以及题解(C++)【编程题均通过100%测试数据】

第一题《日期统计》【枚举】 【问题描述】 小蓝现在有一个长度为100的数组&#xff0c;数组中的每个元素的值都在0到9的范围之内。数组中的元素从左至右如下所示&#xff1a; 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 …

原生数据开发软件 TablePlus for mac

一款非常好用的本地原生数据开发软件&#xff1a;TablePlus激活版。 软件下载&#xff1a;TablePlus for mac v3.11.0激活版 这款优秀的数据库编辑工具支持 MySQL、SQL Server、PostgreSQL 等多种数据库&#xff0c;具备备份、恢复、云同步等功能。它可以帮助您轻松编辑数据库中…

KUKA机器人安全信号的接入方式

KUKA机器人的安全信号与IO模块是相互独立的&#xff0c;即安全信号不是通过IO信号接入到机器人里。安全信号主要是指:急停、安全门等属于机器人安全控制类的信号。 一、KUKA机器人安全信号的接入方式有以下3种&#xff1a; 1、第一种方式:Profisafe,以软件包的形式安装机器人…

2024最新网络编程 面试题解析

2024最新网络编程 面试题解析 三次握手和四次挥手 三次握手 三次握手是TCP/IP协议中用于建立可靠连接的过程。具体步骤如下&#xff1a; 第一次握手&#xff1a;客户端发送一个带有SYN标志的TCP报文段给服务器&#xff0c;请求建立连接&#xff0c;并进入SYN_SENT状态。 第…

Radash一款JavaScript最新的实用工具库,Lodash的平替!

文章目录 Lodash 的痛点进入正题--Radash特点 举例几个常用的api 一说lodash应该大部分前端同学都知道吧&#xff0c;陪伴我们好多年的JavaScript工具库&#xff0c;但是自从 ES6 出现后就慢慢退出前端人的视线&#xff0c;能ES6写的代码绝对不会用Lodash&#xff0c;也不是完全…

快速上手Spring Cloud 九:服务间通信与消息队列

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

回溯dfs和分支限界bfs

一&#xff1a;拓扑排序 207. 课程表 这道题说白了就是在有向图中找环 拓扑排序实际上应用的是贪心算法。 贪心算法简而言之&#xff1a;每一步最优&#xff0c;全局就最优。 每一次都从图中删除没有前驱的顶点&#xff0c;这里并不需要真正的删除操作&#xff0c;通过设置入度…

centos7配置阿里云的镜像站点作为软件包下载源

目录 1、备份 2、下载新的 CentOS-Base.repo 到 /etc/yum.repos.d/ 3、测试 阿里镜像提供的配置方法&#xff1a;centos镜像_centos下载地址_centos安装教程-阿里巴巴开源镜像站 1、备份 [rootlocalhost ~]# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentO…

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测&#xff08;完整源码…

大电流电感的作用和特点

大电流电感又称为高功率电感&#xff0c;一般是指绕线型电感&#xff0c; 一、主要作用 1.在低频时&#xff0c;起蓄能和滤高频&#xff1b; 2.在高频时&#xff0c;它的阻抗特性表现的很明显。有耗能发热&#xff0c;感性效应降低等现象。 简单来说就是对交流信号进行隔离、…

Bun安装与使用

Bun安装与使用。 它目前无法在windows上直接安装使用&#xff0c;必须通过虚拟机安装。 在win10虚拟机中安装 # 查看内核版本 $ uname -srm Linux 6.1.0-10-amd64 x86_64# 安装unzip解压工具 $ sudo apt install unzip# 下载安装脚本并开始安装 curl -fsSL https://bun.sh/ins…

实现一个Google身份验证代替短信验证

最近才知道公司还在做国外的业务&#xff0c;要实现一个登陆辅助验证系统。咱们国内是用手机短信做验证&#xff0c;当然 这个google身份验证只是一个辅助验证登陆方式。看一下演示 看到了嘛。 手机下载一个谷歌身份验证器就可以 。 谷歌身份验证器&#xff0c;我本身是一个基…

Hyper-V 虚拟机设置静态 IP 和外网访问

文章目录 环境说明1 问题简介2 解决过程 环境说明 宿主机操作系统&#xff1a;Windows 11 专业版漏洞复现操作系&#xff1a;debian-live-12.5.0-amd64-standard 1 问题简介 在 Windows 上用自带的 Hyper-V 虚拟机管理应用创建了一个 Debian 12 虚拟机&#xff0c;配置静态 IP…

Ventoy装机

文章目录 Ventoy安装操作系统问题U盘无法识别问题BIOS设置图片 Ventoy安装操作系统问题 当前使用的m.2&#xff08;nvm&#xff09;可以使用在台式机上。 "verification failed sercury violation"这个问题似乎与使用Ventoy创建启动盘并在启用了Secure Boot&#x…