?程序中常?的布局組件 : view,text , rich-text,button,image,navigator,icon,swiper,radio,checkbox珍策。 等

1. view標(biāo)簽

1. 代替原來的 div標(biāo)簽

<view hover-class="h-class">
    點擊我試試
</view>

2. text

1. ?本標(biāo)簽粟耻。
2. 只能嵌套text想邦。
3. ?按?字可以復(fù)制（只有該標(biāo)簽有這個功能）奸笤。
4. 可以對空格回?進?編碼。

5. 代碼演示 :

    <!-- 
        1. user-select="{{true}}" 文本是否可選
        2. decode 是否解碼
     -->
<text  user-select decode>
    text標(biāo)簽 &nbsp; 使用decode
</text>

3. image

1. 圖?標(biāo)簽尚镰，image組件默認(rèn)寬度320px、?度240px立倍。
2. ?持懶加載灭红。

3.1 mode 有效值：

1. mode 有 13 種模式口注，其中 4 種是縮放模式变擒，9 種是裁剪模式。

4. swiper

1. 微信內(nèi)置輪播圖組件淘太。

2. 輪播圖的外層容器 swiper姻僧。

3. 每一個輪播圖項 swiper-item。

4. siwper 標(biāo)簽存在默認(rèn)的樣式:

width 100%
height 150px image 標(biāo)簽也存在默認(rèn)的樣式 320 * 240px
swiper高度無法實現(xiàn)有內(nèi)容撐開

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. 滑塊 : 默認(rèn)寬度和?度都是100%蒲牧。

5. navigator導(dǎo)航組件

1. 導(dǎo)航組件類似超鏈接標(biāo)簽撇贺。

2. open-type有效值：

6. rich-text富文本標(biāo)簽

1. 可以將字符串解析成對應(yīng)標(biāo)簽巩踏，類似 vue 中v-html 功能。

2. 直接解析 html 代碼 :

<!-- 
    rich-text 富文本標(biāo)簽
 -->
 <rich-text nodes="{{html}}"></rich-text>

Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        html: '<h1>Hello rich-text</h1>'
    },
})

3. 解析對象的方式 :

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

Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        nodes: [{
            name: 'div',
            attrs: {
                class: 'div-class',
                style: 'color:red'
            },
            children: [{
                type: 'text',
                text: 'hello wrold!'
            }]
        }]
    },
})

6.1 nodes 屬性

1. nodes 屬性?持字符串和標(biāo)簽節(jié)點數(shù)組续搀。

2. ?本節(jié)點：type=text

1. nodes 不推薦使?String類型，性能會有所下降目代。

2. rich-text件內(nèi)屏蔽所有節(jié)點的事件屈梁。

3. attrs 屬性不?持id，?持class榛了。

4. name 屬性??寫不敏感在讶。

5. 如果使?了不受信任的HTML 節(jié)點，該節(jié)點及其所有?節(jié)點將會被移除霜大。

6. img 標(biāo)簽僅?持?絡(luò)圖?构哺。

7. button標(biāo)簽

1. button 參考手冊

8. icon 標(biāo)簽

1. icon 標(biāo)簽參考手冊

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({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        gender: ''
    },

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

});

4. 參考文檔 : 單選按鈕微信官方文檔

10. checkbox 復(fù)選框

1. 參考文檔 : 復(fù)選框微信官方文檔曙强。

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({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    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
        });
    }
})