|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要為大家詳細介紹了微信小程序商城購物數量加減功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下我們在購買寶貝的時候,購物的數量,經常是我們需要使用的,如下所示:
在購物車里:
現在就為大家介紹這個小組件,在小程序中,該如何去寫
wxml: <!-- 主容器 -->
<view class="stepper">
<!-- 減號 -->
<text class="{{minusStatus}}" bindtap="bindMinus">-</text>
<!-- 數值 -->
<input type="number" bindchange="bindManual" value="{{num}}" />
<!-- 加號 -->
<text class="normal" bindtap="bindPlus">+</text>
</view>wxss: /*全局樣式*/
page {
padding: 20px 0;
}
/*主容器*/
.stepper {
width: 80px;
height: 26px;
/*給主容器設一個邊框*/
border: 1px solid #ccc;
border-radius: 3px;
margin:0 auto;
}
/*加號和減號*/
.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
}
/*數值*/
.stepper input {
width: 40px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
/*給中間的input設置左右邊框即可*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/*普通樣式*/
.stepper .normal{
color: black;
}
/*禁用樣式*/
.stepper .disabled{
color: #ccc;
}js: Page({
data: {
// input默認是1
num: 1,
// 使用data數據對象設置樣式名
minusStatus: 'disabled'
},
/* 點擊減號 */
bindMinus: function() {
var num = this.data.num;
// 如果大于1時,才可以減
if (num > 1) {
num --;
}
// 只有大于一件的時候,才能normal狀態,否則disable狀態
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 將數值與狀態寫回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 點擊加號 */
bindPlus: function() {
var num = this.data.num;
// 不作過多考慮自增1
num ++;
// 只有大于一件的時候,才能normal狀態,否則disable狀態
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 將數值與狀態寫回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 輸入框事件 */
bindManual: function(e) {
var num = e.detail.value;
// 將數值與狀態寫回
this.setData({
num: num
});
}
})運行結果:
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是微信小程序商城項目之購物數量加減的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!