Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "WeChat Mini Programs how to click on the control to select other anti-selection", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to click on the control to select other anti-selection" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Foreword:

If you need to implement to add buy one get one free style to the button, or click to select a single button, it can only be controlled by css combined with js. Mini Program does not have such a control for the time being.

Realize the effect picture:

WeChat Mini Programs initializes the button style automatically when he enters, which requires a field to judge, plus a regular expression wxml file:

{{item.name}} {{item.name}}

Wxss file

.normal {box-sizing: border-box; flex: 0021%; margin: 5px 5px; height: 50px; color:#1aad19; border:1px solid # 1aad19; background-color:transparent;} .selected {box-sizing: border-box; flex: 0021%; margin: 5px 5px; height: 50px; background-color: # F75000; color: white;} .selected1 {box-sizing: border-box; flex: 0021%; margin: 5px 5px; height: 50px; background-color:transparent; border:1px solid # 1aad19; color:#1aad19; Background-image: url (https://wxcx.llzt.net/images/hot.png); background-position:31px 0px; background-repeat:no-repeat; background-size:62%;} .selected2 {box-sizing: border-box; flex: 00 21%; margin: 5px 5px; height: 50px; background-color: # F75000; color: white; background-image: url (https://wxcx.llzt.net/images/hot.png); background-position:31px 0px; background-repeat:no-repeat; background-size:62%;})

The current method loops the collection, then gets the button currently clicked to compare, and then modifies the style

For (var I = 0; I < this.data.liuliangItems.length) Items +) {if (e.target.dataset.orderid = = this.data.liuliangItems [I] .id) {txtArray1 [I] = {id: this.data.liuliangItems.id, changeColor: true, price: this.data.liuliangItems.price, name: this.data.liuliangItems.name One2one: this.data.liuliangItems [I] .one2one}} else {txtArray1 [I] = {id: this.data.liuliangItems.id, changeColor: false, price: this.data.liuliangItems.price, name: this.data.liuliangItems.name, one2one: this.data.liuliangItems.one2one}. This article "WeChat Mini Programs how to click on the control and select other inverted selections" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the relevant articles, welcome to 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.