⼩程序中常⽤的布局组件 : 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. 可以对空格回⻋进⾏编码。

5. 代码演示 :

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

3. image

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

3.1 mode 有效值：

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

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的属性

4.3 swiper-item

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

5. navigator导航组件

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

2. open-type有效值：

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 属性⽀持字符串和标签节点数组。

2. ⽂本节点：type=text

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
        });
    }
})