android商品数量加减,微信小程序实现一个简单的商品数量加减案例
簡介
這是一個用微信小程序原生代碼實現的數量加減demo，主要是用于商品購物車或者商品詳情修改數量使用，很簡單哦~~~。
核心js方法說明addCount(增加數量)
delCount (減少數量)
getCount(獲取數量)
實現效果如下圖所示：
微信小程序實現一個簡單的商品數量加減案例
實現步驟
1、頁面布局
count.wxml 增加主容器代碼和提交button-
+
提交
2、添加頁面wcss樣式
count.css設置全局樣式
page {
background: #EDEDED;
}
設置主容器樣式/*主容器*/
.stepper {
width:130px;
height: 40px;
/*給主容器設一個邊框*/
border: 1rpx solid #818284;
border-radius: 3px;
margin:20px auto;
background: white;
}
/*加號和減號*/
.stepper .sign {
width: 40px;
line-height: 40px;
text-align: center;
float: left;
}
/*數值*/
.stepper .number {
width: 48px;
height: 40px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 16px;
color: #000000;
/*給中間的input設置左右邊框即可*/
border-left: 1rpx solid #818284;
border-right: 1rpx solid #818284;
}
/*普通樣式*/
.stepper .normal{
color: black;
}
/*禁用樣式*/
.stepper .disabled{
color: #ccc;
}
設置button按鈕樣式button{
width: 90%;
color: white;
background:#DFB741;
margin:30px auto;
}
微信小程序實現一個簡單的商品數量加減案例
3、編寫js數據交互
數字初始化為1/**
* 頁面的初始數據
*/
data: {
num:1
},
addCount 點擊“+”號，增加數字/* 加數 */
addCount: function (e) {
console.log("剛剛您點擊了加1");
var num = this.data.num;
// 總數量-1
if (num < 1000) {
this.data.num++;
}
// 將數值與狀態(tài)寫回
this.setData({
num: this.data.num
});
},
delCount 點擊“-”號，減少數字/* 減數 */
delCount: function (e) {
console.log("剛剛您點擊了減1");
var num = this.data.num;
// 商品總數量-1
if (num > 1) {
this.data.num--;
}
// 將數值與狀態(tài)寫回
this.setData({
num: this.data.num
});
},
getCount 獲取設置的結果getCount: function (e) {
var num = this.data.num;
console.log(num);
wx.showToast({
title: "數量：" + num + "",
})
}
好了，demo已經完成感覺測試一下吧！
微信小程序微商城系列
微信小程序實戰(zhàn)篇：小程序之頁面數據傳遞
小程序微商城(一)：https框架搭建并實現導航功能
微信小程序微商城(二)：電商首頁輪播、分類導航和新品特賣實現
小程序微商城(三)：電商首頁無限下拉刷新動態(tài)API數據實現
微信小程序微商城(四)：動態(tài)API實現商品詳情頁(上)
微信小程序微商城(五)：動態(tài)API實現商品詳情頁(下)
微信小程序微商城(六)：動態(tài)API實現新品特賣商品流式布局
微信小程序微商城(七)：動態(tài)API實現商品分類
微信小程序微商城(八)：緩存實現商品購物車功能
微信小程序微商城(九)：微信授權并實現個人中心頁面頁面
微信小程序微商城(十)：用戶收貨地址管
備注
微信小程序微商城系列 都是通過https 動態(tài)獲取數據并展示的，建議從第一篇開始閱讀。大家多多支持本系列文章會繼續(xù)更新下去，謝謝各位！大家在使用過程中有哪些建議可以提出來，我們一起學習哈~~~
微信小程序實現一個簡單的商品數量加減案例
微信小程序實現一個簡單的商品數量加減案例
總結
以上是生活随笔為你收集整理的android商品数量加减,微信小程序实现一个简单的商品数量加减案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 16道嵌入式Ｃ语言面试题(转载)
- 下一篇： SVN为什么比git更好