微信小程式把玩(十五)checkbox元件
阿新 • • 發佈:2019-01-09
不得不吐糟下checkbox預設樣式真是有點略醜!!!checkbox元件為一個多選框被放到checkbox-group組中,並在checkbox-group(只能包含checkbox)中設定監聽事件。
checkbox-group監聽方法:
checkbox多選屬性:
wxml
<!--checkbox-group就是一個checkbox組 有個監聽事件bindchange,監聽資料選中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<!--這裡用label顯示內容,for迴圈寫法 wx:for-items 預設item為每一項-->
<label style="display: flex;" wx:for-items="{{items}}">
<!--value值和預設選中狀態都是通過資料繫結在js中的-->
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
js
Page({
/**
* 初始化資料
*/
data:{
items: [
{name: 'JAVA' , value: 'Android', checked: 'true'},
{name: 'Object-C', value: 'IOS'},
{name: 'JSX', value: 'ReactNative'},
{name: 'JS', value: 'wechat'},
{name: 'Python', value: 'Web'}
]
},
/**
* 監聽checkbox事件
*/
listenCheckboxChange:function(e) {
console.log('當checkbox-group中的checkbox選中或者取消是我被呼叫' );
//列印物件包含的詳細資訊
console.log(e);
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的引數
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})