|
導(dǎo)讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 這篇文章主要介紹了微信小程序checkbox組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
不得不吐糟下checkbox默認(rèn)樣式真是有點(diǎn)略丑。!checkbox組件為一個(gè)多選框被放到checkbox-group組中,并在checkbox-group(只能包含checkbox)中設(shè)置監(jiān)聽事件。 checkbox-group監(jiān)聽方法:
checkbox多選屬性:
wxml <!--checkbox-group就是一個(gè)checkbox組 有個(gè)監(jiān)聽事件bindchange,監(jiān)聽數(shù)據(jù)選中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<!--這里用label顯示內(nèi)容,for循環(huán)寫法 wx:for-items 默認(rèn)item為每一項(xiàng)-->
<label style="display: flex;" wx:for-items="{{items}}">
<!--value值和默認(rèn)選中狀態(tài)都是通過數(shù)據(jù)綁定在js中的-->
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>js Page({
/**
* 初始化數(shù)據(jù)
*/
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'}
]
},
/**
* 監(jiān)聽checkbox事件
*/
listenCheckboxChange:function(e) {
console.log('當(dāng)checkbox-group中的checkbox選中或者取消是我被調(diào)用');
//打印對象包含的詳細(xì)信息
console.log(e);
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})以上就是微信小程序checkbox組件詳細(xì)介紹的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!