這篇文章主要為大家詳細(xì)介紹了微信小程序商城購(gòu)物數(shù)量加減功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們?cè)谫?gòu)買(mǎi)寶貝的時(shí)候，購(gòu)物的數(shù)量，經(jīng)常是我們需要使用的，如下所示：
在寶貝詳情頁(yè)里：
在購(gòu)物車(chē)?yán)铮?/p>
現(xiàn)在就為大家介紹這個(gè)小組件，在小程序中，該如何去寫(xiě)
下圖為本項(xiàng)目的圖：
wxml：
<!-- 主容器 -->
<view class="stepper">
<!-- 減號(hào) -->
<text class="{{minusStatus}}" bindtap="bindMinus">-</text>
<!-- 數(shù)值 -->
<input type="number" bindchange="bindManual" value="{{num}}" />
<!-- 加號(hào) -->
<text class="normal" bindtap="bindPlus">+</text>
</view>
登錄后復(fù)制
wxss：
/*全局樣式*/
page {
padding: 20px 0;
}
/*主容器*/
.stepper {
width: 80px;
height: 26px;
/*給主容器設(shè)一個(gè)邊框*/
border: 1px solid #ccc;
border-radius: 3px;
margin:0 auto;
}
/*加號(hào)和減號(hào)*/
.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
}
/*數(shù)值*/
.stepper input {
width: 40px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
/*給中間的input設(shè)置左右邊框即可*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/*普通樣式*/
.stepper .normal{
color: black;
}
/*禁用樣式*/
.stepper .disabled{
color: #ccc;
}
登錄后復(fù)制
js：
Page({
data: {
// input默認(rèn)是1
num: 1,
// 使用data數(shù)據(jù)對(duì)象設(shè)置樣式名
minusStatus: 'disabled'
},
/* 點(diǎn)擊減號(hào) */
bindMinus: function() {
var num = this.data.num;
// 如果大于1時(shí)，才可以減
if (num > 1) {
num --;
}
// 只有大于一件的時(shí)候，才能normal狀態(tài)，否則disable狀態(tài)
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 將數(shù)值與狀態(tài)寫(xiě)回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 點(diǎn)擊加號(hào) */
bindPlus: function() {
var num = this.data.num;
// 不作過(guò)多考慮自增1
num ++;
// 只有大于一件的時(shí)候，才能normal狀態(tài)，否則disable狀態(tài)
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 將數(shù)值與狀態(tài)寫(xiě)回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 輸入框事件 */
bindManual: function(e) {
var num = e.detail.value;
// 將數(shù)值與狀態(tài)寫(xiě)回
this.setData({
num: num
});
}
})
登錄后復(fù)制
運(yùn)行結(jié)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序商城項(xiàng)目之購(gòu)物數(shù)量加減的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
