微信小程序商城項目之購物數(shù)量加減(3)
更新時間:2022年05月22日 07:47:27 作者:michael_ouyang
這篇文章主要為大家詳細介紹了微信小程序商城購物數(shù)量加減功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
我們在購買寶貝的時候,購物的數(shù)量,經(jīng)常是我們需要使用的,如下所示:
在寶貝詳情頁里:
在購物車里:
現(xiàn)在就為大家介紹這個小組件,在小程序中,該如何去寫
下圖為本項目的圖:
wxml:
<!-- 主容器 --> <view class="stepper"> <!-- 減號 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text> <!-- 數(shù)值 --> <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; } /*數(shù)值*/ .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數(shù)據(jù)對象設置樣式名 minusStatus: 'disabled' }, /* 點擊減號 */ bindMinus: function() { var num = this.data.num; // 如果大于1時,才可以減 if (num > 1) { num --; } // 只有大于一件的時候,才能normal狀態(tài),否則disable狀態(tài) var minusStatus = num <= 1 ? 'disabled' : 'normal'; // 將數(shù)值與狀態(tài)寫回 this.setData({ num: num, minusStatus: minusStatus }); }, /* 點擊加號 */ bindPlus: function() { var num = this.data.num; // 不作過多考慮自增1 num ++; // 只有大于一件的時候,才能normal狀態(tài),否則disable狀態(tài) var minusStatus = num < 1 ? 'disabled' : 'normal'; // 將數(shù)值與狀態(tài)寫回 this.setData({ num: num, minusStatus: minusStatus }); }, /* 輸入框事件 */ bindManual: function(e) { var num = e.detail.value; // 將數(shù)值與狀態(tài)寫回 this.setData({ num: num }); } })
運行結(jié)果:
demo下載地址:商城購物數(shù)量加減
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
bootstrap table方法之expandRow-collapseRow展開或關閉當前行數(shù)據(jù)
這篇文章主要為大家詳細介紹了bootstrap table方法之expandRow-collapseRow展開或關閉當前行數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09Js為表單動態(tài)添加節(jié)點內(nèi)容的方法
這篇文章主要介紹了Js為表單動態(tài)添加節(jié)點內(nèi)容的方法,實例分析了js針對表單節(jié)點進行添加操作的常用技巧,需要的朋友可以參考下2015-02-02CocosCreator Typescript制作俄羅斯方塊游戲
目前關于cocos開發(fā)俄羅斯方塊的文章幾乎寥寥無幾,因此本文將主要介紹如何通過CocosCreator Typescript制作簡單的俄羅斯方塊游戲,代碼具有一定價值,感興趣的同學可以學習一下2021-11-11