在開(kāi)發(fā)小程序的過(guò)程中，經(jīng)常要用到Checkbox來(lái)承載用戶(hù)對(duì)于某選項(xiàng)的選擇或者不選擇异逐，聽(tīng)上去像是廢話(huà)（哈哈）耕肩。
我們先看一下小程序官方推薦的Checkbox使用方法
- 第一步，定義結(jié)構(gòu)
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
對(duì)應(yīng)到html表單欲逃，這個(gè)結(jié)構(gòu)是非常容易理解的找蜜，一個(gè)多選框組，這個(gè)組內(nèi)包含若干個(gè)checkbox稳析，組的根節(jié)點(diǎn)負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的選擇洗做、取消選擇等事件，并映射到指定的處理方法上彰居。
- 第二步诚纸，定義用于渲染的初始數(shù)據(jù)
Page({
data: {
items: [
{name: 'USA', value: '美國(guó)'},
{name: 'CHN', value: '中國(guó)', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國(guó)'},
{name: 'TUR', value: '法國(guó)'},
]
},
checkboxChange: function(e) {
console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
}
})
這樣裕菠，Checkbox的原生小程序組件就實(shí)現(xiàn)了咬清。但是，問(wèn)題來(lái)了奴潘。
原生的Checkbox太丑了旧烧！要改掉它的表現(xiàn)。
好吧画髓，這種事情對(duì)于前端開(kāi)發(fā)而言簡(jiǎn)直太常見(jiàn)了掘剪，不就是改表現(xiàn)嘛，咱們來(lái)重置掉它的默認(rèn)表現(xiàn)奈虾，換成美麗的設(shè)計(jì)稿上的圖片就萬(wàn)事大吉啦夺谁。
打開(kāi)小程序開(kāi)發(fā)者工具的調(diào)試模式，查看元素的樣式肉微，截圖如下
心里無(wú)限的憂(yōu)傷啊匾鸥，完全看不到小程序是如何設(shè)置Checkbox的樣式的，小程序?qū)崿F(xiàn)Checkbox的樣式代碼對(duì)我們是黑盒的碉纳。
于是很多同學(xué)自己開(kāi)始吭哧吭哧地編寫(xiě)一個(gè)模擬的組件勿负，創(chuàng)建一個(gè)template，編寫(xiě)它的數(shù)據(jù)渲染和事件監(jiān)聽(tīng)處理劳曹，以及對(duì)用戶(hù)操作的數(shù)據(jù)進(jìn)行實(shí)時(shí)更新奴愉，總之是自己要做一套類(lèi)原生的工作。
本文要說(shuō)的點(diǎn)就是铁孵，我們不用重寫(xiě)一套Checkbox組件锭硼，我們還是在原生的Checkbox上進(jìn)行表現(xiàn)的重置即可，其他的繼續(xù)沿用Checkbox本身的機(jī)制蜕劝，工作量大大減少檀头。
接下來(lái)是比較關(guān)鍵的一步
- 切到開(kāi)發(fā)者工具
- 選擇調(diào)試模式
-
選中
- 將鼠標(biāo)hover到Checkbox上
我們會(huì)看到在鼠標(biāo)的上會(huì)有元素實(shí)際選擇器的顯示
div.wx-checkbox-input
小程序歸根結(jié)底還是要轉(zhuǎn)換成實(shí)際的html來(lái)交給webview渲染轰异，因此我們有理由懷疑，我們只要重置上面的類(lèi)表現(xiàn)就能重置Checkbox的表現(xiàn)鳖擒，于是先做了如下代碼測(cè)試
.wx-checkbox-input{
display: none;
}
刷新小程序頁(yè)面溉浙，發(fā)現(xiàn)Checkbox不見(jiàn)了，說(shuō)明我們的猜測(cè)是成立的蒋荚，接下來(lái)就是去實(shí)現(xiàn)我們想要的Checkbox樣式啦
- 首先戳稽，定義結(jié)構(gòu)
<template name="ws-checkbox">
<checkbox class="ws-checkbox" value="{{text}}" checked="{{checked}}"/>
</template>
- 然后，定義樣式
.wx-checkbox-input{
display: none;
}
.ws-checkbox {
display: inline-block;
width: 12px;
height: 12px;
background-image: url(XXX.png);
background-size: 100%;
}
.ws-checkbox[checked] {
background-image: url(XXX-checked.png);
}
各位只需要將上面代碼中的圖片地址換成自己的圖片地址即可期升，一個(gè)自定義的Checkbox就實(shí)現(xiàn)啦惊奇，而且，對(duì)于使用其原生的任何功能都沒(méi)有影響播赁。
有了上面介紹的方法颂郎，大家還可以去實(shí)現(xiàn)自定義的radio-button哦。
