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