一、開(kāi)關(guān)選擇器---switch

開(kāi)關(guān)選擇器小案例
text.wxml

<view class="page">
    <view class="item">
        聲音<switch type="switch" checked bindchange="change" />
    </view>
    <view class="item">
        震動(dòng)<switch type="switch" bindchange="change" />
    </view>
</view>

text.js

Page({
    change:function(e){
        console.log(e.detail.value)
        //被選上的時(shí)候值為true
        //沒(méi)有被選上的時(shí)候值為false
        //通過(guò)這個(gè)我們可以對(duì)其進(jìn)行操作
    }
})

text.wxss

.item{
    background-color: #dfdfdf;
    padding: 10px;
    line-height: 30px;
    border: 1px solid white;
}
switch{
    float: right
}

運(yùn)行效果

二、圖標(biāo)---組件：icon

微信提供了很多默認(rèn)的圖標(biāo)，可以自行選擇，那么列舉一下、

圖標(biāo)案例
text.wxml

<view class="page">
    <view>{{title}}</view>
    <view wx:for="{{icons}}" class="center">
      {{item.type}}  <icon type="{{item.type}}" size="{{item.size}}"></icon>
    </view>

    <button>
        <icon type="download"></icon>下載    
    </<span class="hljs-name" o="" cl="" ptm="" pbm"="" style="word-wrap: break-word; margin: 0px; padding: 0px;">