Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how WeChat Mini Programs checkbox becomes smaller" is not quite understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how WeChat Mini Programs checkbox becomes smaller" article.

WeChat Mini Programs checkbox how small to listen for all checkbox changes through serviceValChange, listening function through e.dtail.value to get a selected array, by selecting the array checkArr [], to the original data array allGoodFilter [] of the selected object's check attribute set true, not selected set false, in our wxml, by judging each object's checked attribute to give him a "is_checked" class.

Wxml Code:

{{item.name}}

Wxss Code:

.flex {

Flex-direction: row

}

.flex .item {

Flex: 1

}

.service _ selection {

Padding: 15px 10px

Background: # fff

}

.service _ selection label {

Background: # f0f1ec

Padding: 6px 7px

Font-size: 12px

Border-radius: 4px

}

.service _ selection .is _ checked {

Border: 1px solid # fe0002

Color: # fe0002

Background: # fff

}

Js Code:

The first is the data:

Data: {

AllGoodsFilte: [

{name: 'personal delivery', value: '0delivery, checked: true}

{name: 'boutique brands', value: '1brands, checked: false}

{name: 'value discount', value: '2discount, checked: false}

{name: 'store pick-up', value: '3customers, checked: false}

{name:'up to three hours', value: '4hours, checked: false}

]

Bound checkbox listening function:

ServiceValChange: function (e) {

Var allGoodsFilte = this.data.allGoodsFilte

Var checkArr = e.detail.value

For (var I = 0; I < allGoodsFilte.length; iTunes +) {

If (checkArr.indexOf (I + "")! =-1) {

AllGoodsFilte [I] .filter = true

} else {

AllGoodsFilte [I] .filter = false

}

}

This.setData ({

AllGoodsFilte: allGoodsFilte

})

}

The above is about the content of this article on "how WeChat Mini Programs checkbox becomes smaller". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.