微信小程序的页面制作---常用组件及其属性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

相关推荐
小兵张健9 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_10 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪10 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰12 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒12 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice12 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄12 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队13 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰13 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans13 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端