微信小程序點(diǎn)擊事件,小程序button或view后選中其它反選

2020-09-27

導(dǎo)讀：如果需要實(shí)現(xiàn)進(jìn)來進(jìn)行給按鈕加上買一送一的樣式，或者單擊就選中單個按鈕，只能靠css結(jié)合js進(jìn)行控制了，小程序暫時沒有這樣的控件。 66666313.png (13.97 KB, 下載次數(shù): 71) 下載附件保存...

如果需要實(shí)現(xiàn)進(jìn)來進(jìn)行給按鈕加上買一送一的樣式，或者單擊就選中單個按鈕，只能靠css結(jié)合js進(jìn)行控制了，小程序暫時沒有這樣的控件。
微信小程序進(jìn)來的時候自動進(jìn)行按鈕樣式的初始化，這個需要一個字段做判斷，加上正則表達(dá)式wxml文件：

<block wx:for="{{liuliangItems}}">
<block wx:if="{{item.one2one == 1}}">
<button class="{{item.changeColor?'selected2':'selected1'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
</block>
<block wx:else>
<button class="{{item.changeColor?'selected':'normal'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
</block>
</block>

復(fù)制代碼

wxss文件

.normal{
box-sizing: border-box;
flex: 0 0 21%;
margin: 5px 5px;
height: 50px;
color:#1aad19;
border:1px solid #1aad19;
background-color:transparent;
}
.selected{
box-sizing: border-box;
flex: 0 0 21%;
margin: 5px 5px;
height: 50px;
background-color: #F75000;
color: white;
}
.selected1{
box-sizing: border-box;
flex: 0 0 21%;
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: 0 0 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%;
}

現(xiàn)在的方法把集合進(jìn)行循環(huán)，然后獲取當(dāng)前點(diǎn)擊的這個按鈕進(jìn)行比較，然后進(jìn)行樣式的修改

for (var i = 0; i < this.data.liuliangItems.length; i++) {
if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
txtArray1[i] = {
id: this.data.liuliangItems[i].id, changeColor: true,
price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
one2one: this.data.liuliangItems[i].one2one
}
} else {
txtArray1[i] = {
id: this.data.liuliangItems[i].id, changeColor: false,
price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
one2one: this.data.liuliangItems[i].one2one
}
}
}

第二部分：如何開通一個小商店