⼩程序中常⽤的布局组件 : view,text , rich-text,button,image,navigator,icon,swiper,radio,checkbox。 等

1. view标签

1. 代替原来的 div标签

<view hover-class="h-class">
    点击我试试
</view>

2. text

1. ⽂本标签。
2. 只能嵌套text。
3. ⻓按⽂字可以复制（只有该标签有这个功能）。
4. 可以对空格回⻋进⾏编码。

属性名	类型	默认值	说明
selectable	Boolean	false	⽂本是否可选
decode	Boolean	false	是否解码
user-select	Boolean	false	文本是否可选，该属性会使文本节点显示为 inline-block

5. 代码演示 :

    <!-- 
        1. user-select="{{true}}" 文本是否可选
        2. decode 是否解码
     -->
<text  user-select decode>
    text标签 &nbsp; 使用decode
</text>

3. image

1. 图⽚标签，image组件默认宽度320px、⾼度240px。
2. ⽀持懒加载。

属性名	类型	默认值	说明
src	String		图⽚资源地址
mode	String	scaleToFill	图⽚裁剪、缩放的模式
lazy-load	Boolean	false	图⽚懒加载

3.1 mode 有效值：

1. mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image元素
缩放	aspectFit	保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放	aspectFill	保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪	top	不缩放图⽚，只显⽰图⽚的顶部区域
裁剪	bottom	缩放图⽚，只显⽰图⽚的底部区域
裁剪	center	不缩放图⽚，只显⽰图⽚的中间区域
裁剪	left	不缩放图⽚，只显⽰图⽚的左边区域
裁剪	right	不缩放图⽚，只显⽰图⽚的右边区域
裁剪	top``left	不缩放图⽚，只显⽰图⽚的左上边区域
裁剪	top``right	不缩放图，只显⽰图⽚的右上边区域
裁剪	bottom``left	不缩放图⽚，只显⽰图⽚的左下边区域
裁剪	bottom``right	不缩放图⽚，只显⽰图⽚的右下边区域

4. swiper

1. 微信内置轮播图组件。

2. 轮播图的外层容器 swiper。

3. 每一个轮播图项 swiper-item。

4. siwper 标签存在默认的样式:

width 100%
height 150px image 标签也存在默认的样式 320 * 240px
swiper高度无法实现有内容撑开

5. 先找出原来图片的宽度和高度进行等比例计算给swiper定高度和宽度:

原图的宽度和高度是 640*200
计算 ：swiper 宽度 /swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 高度 * (原图的宽度 / 原图的高度)
swiper height = 100vm(750rpx) * 200 / 640

4.1 轮播图案例

4.1.1 wxml

    <swiper 
    autoplay="{{true}}" 
    interval="3000" 
    circular="{{true}}" 
    indicator-dots="{{true}}" 
    indicator-color="rgba(66, 66, 66, .3)"
    indicator-active-color="#888666"
>
    <swiper-item > <image src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" mode="widthFix" /></swiper-item>
    <swiper-item > <image src="http://gw.alicdn.com/imgextra/i2/50/O1CN01mNsh8x1CEwQx6WiqP_!!50-0-lubanu.jpg" mode="widthFix" /></swiper-item>
    <swiper-item > <image src="http://gw.alicdn.com/imgextra/i4/117/O1CN01w8hBHE1CjcyBxK7WT_!!117-0-lubanu.jpg" mode="widthFix" /></swiper-item>
</swiper>

4.1.2 wxss

swiper {
    width: 100%;
    height: calc(750rpx * 200 / 640);
}

image {
    width: 100%;
}

4.2 swiper的属性

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显⽰⾯板指⽰点
indicator-color	Color	rgba(0,0,0,.3)	指⽰点颜⾊
indicator-active-color	Color	#000000	当前选中的指⽰点颜⾊
autoplay	Boolean	false	是否⾃动切换
interval	Number	5000ms	⾃动切换时间间隔
circular	Boolean	false	是否循环轮播

4.3 swiper-item

1. 滑块 : 默认宽度和⾼度都是100%。

5. navigator导航组件

1. 导航组件类似超链接标签。

属性名	类型	默认值	说明
target	String	self	在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram
url	String		当前⼩程序内的跳转链接
opentype	String	navigate	跳转⽅式

2. open-type有效值：

值	说明
navigate	保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到 tabbar⻚⾯
redirect	关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar⻚⾯。
switchTab	跳转到tabBar⻚⾯，并关闭其他所有⾮tabBar⻚⾯
reLaunch	关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
navigateBack	关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过getCurrentPages()获取当前的⻚⾯栈，决定需要返回⼏层
exit	退出⼩程序，target= miniProgram 时⽣效

6. rich-text富文本标签

1. 可以将字符串解析成对应标签，类似 vue 中v-html 功能。

2. 直接解析 html 代码 :

<!-- 
    rich-text 富文本标签
 -->
 <rich-text nodes="{{html}}"></rich-text>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        html: '<h1>Hello rich-text</h1>'
    },
})

3. 解析对象的方式 :

<rich-text nodes="{{nodes}}"></rich-text>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        nodes: [{
            name: 'div',
            attrs: {
                class: 'div-class',
                style: 'color:red'
            },
            children: [{
                type: 'text',
                text: 'hello wrold!'
            }]
        }]
    },
})

6.1 nodes 属性

1. nodes 属性⽀持字符串和标签节点数组。

属性	说明	类型	必填	备注
name	标签名	string	是	⽀持部分受信任的HTML节点
attrs	属性	object	否	⽀持部分受信任的属性，遵循Pascal命名法
children	⼦节点列表	array	否	结构和nodes⼀致

2. ⽂本节点：type=text

属性	说明	类型	必填	备注
text	⽂本	string	是	⽀持entities

1. nodes 不推荐使⽤String类型，性能会有所下降。

2. rich-text件内屏蔽所有节点的事件。

3. attrs 属性不⽀持id，⽀持class。

4. name 属性⼤⼩写不敏感。

5. 如果使⽤了不受信任的HTML 节点，该节点及其所有⼦节点将会被移除。

6. img 标签仅⽀持⽹络图⽚。

7. button标签

1. button 参考手册

8. icon 标签

1. icon 标签参考手册

9. radio 单选按钮

1. 需要搭配radio-group⼀起使⽤。

2. 可以通过 color 属性来修改颜色。

3. 代码案例 :

<!-- 

    1. radio 单选按钮

  -->

  <radio-group bindchange="handleChange">
      <radio color="red" value="male" /> 男
      <radio color="red" value="female"/> 女
  </radio-group>
    
  <view>
      您选择的性别是 : {{gender}}
  </view>

 // pages/demo14/demo14.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        gender: ''
    },

    handleChange(e) {
        let gender = e.detail.value;
        this.setData({
            // 这里是ES6的写法 gender = gender
            gender
        });
    }

});

4. 参考文档 : 单选按钮微信官方文档

10. checkbox 复选框

1. 参考文档 : 复选框微信官方文档。

2. 参考代码 wxml ：

<checkbox-group bindchange="handleChange">

    <checkbox  wx:for="{{list}}" wx:key="{{item.id}}" value="{{item.value}}">
        {{item.name}}
    </checkbox>
    
</checkbox-group>

<view>
    您选中的水果有 : {{checkedList}}
</view>
  

3. 参考代码js：

 // pages/demo15/demo15.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: [{
                id: 0,
                name: '苹果',
                value: 'apple'
            },
            {
                id: 1,
                name: '香蕉',
                value: 'banana'
            },
            {
                id: 2,
                name: '葡萄',
                value: 'grape'
            },
        ],
        checkedList: []
    },

    handleChange(e) {
        console.log(e);
        let checkedList = e.detail.value;
        this.setData({
            checkedList
        });
    }
})