簡介

這是一個用微信小程序原生代碼實現(xiàn)的數(shù)量加減demo，主要是用于商品購物車或者商品詳情修改數(shù)量使用，很簡單哦~~~。

核心js方法說明addCount(增加數(shù)量)

delCount (減少數(shù)量)

getCount(獲取數(shù)量)

實現(xiàn)效果如下圖所示：

微信小程序?qū)崿F(xiàn)一個簡單的商品數(shù)量加減案例

實現(xiàn)步驟

1、頁面布局

count.wxml 增加主容器代碼和提交button-

+

提交

2、添加頁面wcss樣式

count.css設(shè)置全局樣式

page {

background: #EDEDED;

}

設(shè)置主容器樣式/*主容器*/

.stepper {

width:130px;

height: 40px;

/*給主容器設(shè)一個邊框*/

border: 1rpx solid #818284;

border-radius: 3px;

margin:20px auto;

background: white;

}

/*加號和減號*/

.stepper .sign {

width: 40px;

line-height: 40px;

text-align: center;

float: left;

}

/*數(shù)值*/

.stepper .number {

width: 48px;

height: 40px;

float: left;

margin: 0 auto;

text-align: center;

font-size: 16px;

color: #000000;

/*給中間的input設(shè)置左右邊框即可*/

border-left: 1rpx solid #818284;

border-right: 1rpx solid #818284;

}

/*普通樣式*/

.stepper .normal{

color: black;

}

/*禁用樣式*/

.stepper .disabled{

color: #ccc;

}

設(shè)置button按鈕樣式button{

width: 90%;

color: white;

background:#DFB741;

margin:30px auto;

}

微信小程序?qū)崿F(xiàn)一個簡單的商品數(shù)量加減案例

3、編寫js數(shù)據(jù)交互

數(shù)字初始化為1/**

* 頁面的初始數(shù)據(jù)

*/

data: {

num:1

},

addCount 點擊“+”號，增加數(shù)字/* 加數(shù) */

addCount: function (e) {

console.log("剛剛您點擊了加1");

var num = this.data.num;

// 總數(shù)量-1

if (num < 1000) {

this.data.num++;

}

// 將數(shù)值與狀態(tài)寫回

this.setData({

num: this.data.num

});

},

delCount 點擊“-”號，減少數(shù)字/* 減數(shù) */

delCount: function (e) {

console.log("剛剛您點擊了減1");

var num = this.data.num;

// 商品總數(shù)量-1

if (num > 1) {

this.data.num--;

}

// 將數(shù)值與狀態(tài)寫回

this.setData({

num: this.data.num

});

},

getCount 獲取設(shè)置的結(jié)果getCount: function (e) {

var num = this.data.num;

console.log(num);

wx.showToast({

title: "數(shù)量：" + num + "",

})

}

好了，demo已經(jīng)完成感覺測試一下吧！

微信小程序微商城系列

微信小程序?qū)崙?zhàn)篇：小程序之頁面數(shù)據(jù)傳遞

小程序微商城(一)：https框架搭建并實現(xiàn)導(dǎo)航功能

微信小程序微商城(二)：電商首頁輪播、分類導(dǎo)航和新品特賣實現(xiàn)

小程序微商城(三)：電商首頁無限下拉刷新動態(tài)API數(shù)據(jù)實現(xiàn)

微信小程序微商城(四)：動態(tài)API實現(xiàn)商品詳情頁(上)

微信小程序微商城(五)：動態(tài)API實現(xiàn)商品詳情頁(下)

微信小程序微商城(六)：動態(tài)API實現(xiàn)新品特賣商品流式布局

微信小程序微商城(七)：動態(tài)API實現(xiàn)商品分類

微信小程序微商城(八)：緩存實現(xiàn)商品購物車功能

微信小程序微商城(九)：微信授權(quán)并實現(xiàn)個人中心頁面頁面

微信小程序微商城(十)：用戶收貨地址管

備注

微信小程序微商城系列 都是通過https 動態(tài)獲取數(shù)據(jù)并展示的，建議從第一篇開始閱讀。大家多多支持本系列文章會繼續(xù)更新下去，謝謝各位！大家在使用過程中有哪些建議可以提出來，我們一起學(xué)習(xí)哈~~~

微信小程序?qū)崿F(xiàn)一個簡單的商品數(shù)量加減案例

微信小程序?qū)崿F(xiàn)一個簡單的商品數(shù)量加減案例

總結(jié)

以上是生活随笔為你收集整理的android商品数量加减,微信小程序实现一个简单的商品数量加减案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。