開關選擇器小案例
text.wxml
<view class="page"> <view class="item"> 聲音<switch type="switch" checked bindchange="change" /> </view> <view class="item"> 震動<switch type="switch" bindchange="change" /> </view> </view>
text.js
Page({ change:function(e){ console.log(e.detail.value) //被選上的時候值為true //沒有被選上的時候值為false //通過這個我們可以對其進行操作 } })
text.wxss
.item{ background-color: #dfdfdf; padding: 10px; line-height: 30px; border: 1px solid white; } switch{ float: right }
運行效果
微信提供了很多默認的圖標,可以自行選擇,那么列舉一下、
圖標案例
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;">