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

news/2024/4/29 5:29:07/文章来源:https://blog.csdn.net/2301_76669854/article/details/136991669

一、标签栏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.luyixian.cn/news_show_1028052.aspx

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

相关文章

RelayAttention:让大型语言模型更高效地处理长提示符

一、前言 虽然大型语言模型 (LLM) 近年来取得了非常显著的进展&#xff0c;也在各种自然语言处理任务中展现出强大的能力。然而&#xff0c;LLM 的在实际的应用落地层面也面临着一些实际挑战&#xff0c;其中之一就是效率和成本问题&#xff0c;导致了在垂直行业实际落地的应用…

CE-Net:用于2D医学图像分割的上下文编码器网络

CE-Net&#xff1a;用于2D医学图像分割的上下文编码器网络 摘要引言方法 【2019】CE-NetContext Encoder Network for 2D Medical Image Segmentation 摘要 医学图像分割是医学图像分析中的重要步骤。随着卷积神经网络在图像处理中的快速发展&#xff0c;深度学习已经被用于医…

服务器被攻击有什么表现?

引言 在现今高度互联的网络环境中&#xff0c;服务器安全已成为每个企业和个人站长不容忽视的重要议题。服务器作为承载关键业务和数据的核心设施&#xff0c;一旦遭受攻击&#xff0c;不仅可能导致服务中断、数据泄露&#xff0c;还可能带来严重的经济损失和声誉损害。本文旨…

【二叉树】Leetcode 98. 验证二叉搜索树【中等】

验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例1&a…

fpga 通过axi master读写PS侧DDR的仿真和上板测试

FPGA和ARM数据交互是ZYNQ系统中非常重要的内容。PS提供了供FPGA读写的AXI-HP接口用于两者的高速通信和数据交互。一般的&#xff0c;我们会采用AXI DMA的方式去传输数据&#xff0c;DMA代码基本是是C编写&#xff0c;对于FPGA开发者来说不利于维护和debug。本文提供一种手写AXI…

6、鸿蒙学习-Stage模型应用程序包结构

基于Stage模型开发的应用&#xff0c;经编译打包后&#xff0c;其应用程序的结构如下图应用程序包结构&#xff08;Stage模型&#xff09;所示。开发者需要熟悉应用程序包结构相关的基本概念。 一、在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevE…

“免密支付”出事了?看看背后的安全隐患

#免密支付# 的安全问题近日冲上热搜&#xff0c;大家来看看怎么一回事。 “我不知道什么时候开通的‘免密支付’功能&#xff0c;直到手机频繁收到账单提醒&#xff0c;才发现平台账号被盗&#xff0c;对方通过‘免密支付’消费了5000多元。这种事关会员安全的操作提示应该设置…

机器学习概论—增强学习

机器学习概论—增强学习 强化学习(Reinforcement Learning, RL)或者说是增强学习,是机器学习的一个领域,旨在使智能体通过与环境的交互学习如何做出决策,它是关于在特定情况下采取适当的行动来最大化奖励。它被各种软件和机器用来寻找在特定情况下应采取的最佳行为或路径…

无忧微服务:如何实现大流量下新版本的发布自由

作者&#xff1a;项良、十眠 微服务上云门槛降低&#xff0c;用好微服务才是关键 据调研数据显示&#xff0c;约 70% 的生产故障是由变更引起的。在阿里云上的企业应用如茶百道、极氪汽车和来电等&#xff0c;他们是如何解决变更引起的稳定性风险&#xff0c;实现了在白天高流…

etf期权开户有哪些基本条件,期权的佣金最低多少?

在中国开设etf期权账户&#xff0c;投资者需要满足一系列的基本条件。首先&#xff0c;投资者的证券账户日均客户权益不得低于50万元人民币&#xff0c;且需有6个月以上的证券或期货交易经验。此外&#xff0c;投资者还必须通过相关的测试&#xff0c;并具备被认可的期权模拟交…

wpf程序调用macad的c++编写的dll

1.把macad里的build&#xff0c;source文件夹复制到一个文件夹里 2.创建一个wpf项目&#xff0c;在解决方案里添加macad.occt项目 3.把macad.occt设为dll文件&#xff0c;修改平台工具集&#xff0c;在macadtest里引用macad.occt 4.运行&#xff0c;应该会报错&#xff0c;说找…

深度学习每周学习总结P3(天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据链接 提取码&#xff1a;o3ix 目录 0. 总结1. 数据导入部分数据导入部分代码详解&#xff1a;a. 数据读取部分a.1 提问&#xff1a;关…

30-3 越权漏洞 - 水平越权(横向越权)

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、定义 攻击者可以访问和操作与其拥有同级权限的用户资源。 示例: 学生A在教务系统上正常只能修改自己的作业内容,但由于不合理的权限校验规则等原因,学生A可以修改学生B的内…

【CDA二级数据分析备考思维导图】

CDA二级数据分析备考思维导图 CDA二级复习备考资料共计七个章节&#xff0c;如需资料&#xff0c;请留言&#xff0c;概览如下图&#xff1a;一、数据采集与处理1.数据采集方法2.市场调研和数据录入3、数据探索与可视化4、数据预处理方法 总结&#xff1a;以上为自己学习数据分…

修改 RabbitMQ 默认超时时间

MQ客户端正常运行&#xff0c;突然就报连接错误&#xff0c; 错误信息写的很明确&#xff0c;是客户端连接超时。 不过很疑虑&#xff0c;为什么会出现连接超时呢&#xff1f;代码没动过&#xff0c;网络也ok&#xff0c;也设置了心跳和重连机制。 最终在官网中找到了答案&am…

展示大屏-24小时天气预报

一、项目说明 展示大屏显示未来一周天气和24小时天气详情。 二、技术工具 1.语言&框架&#xff1a;java、springboot 2.UI界面&#xff1a;jQuery、HTML、CSS、 VUE 3.开发工具&#xff1a;IntelliJ IDEA、Eclipse 三、实现步骤 后端步骤 1.调取免费或收费的API接口。 …

CSGO赛事管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 系…

harmonyos:显示图片(Image)

开发者经常需要在应用中显示一些图片&#xff0c;例如&#xff1a;按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现&#xff0c;Image支持多种图片格式&#xff0c;包括png、jpg、bmp、svg和gif&#xff0c;具体用法请参考Image组件。 Image通过调…

路由的完整使用

多页面和单页面 多页面是指超链接等跳转到另一个HTML文件,单页面是仍是这个文件只是路由改变了页面的一部分结构. 路由的基本使用 使用vue2,则配套的路由需要是第3版. 1)下载vue-router插件 2)引入导出函数 3)new 创建路由对象 4)当写到vue的router后只能写路由对象,因此只…

快麦ERP中采购单在旺店通中同步退货

什么是快麦ERP 快麦ERP作为专业的电商ERP系统软件&#xff0c;为所有的商家提供涵盖订单、库存、分销、采购、财务、员工绩效等一体化的电商ERP解决方案。通过仓储数字化升级和库存精准化管理&#xff0c;帮助商家有更高效的工作体系&#xff0c;以数字赋能大卖家实现降本增效…