微信小程序商城项目之购物数量加减（3）

微信小程序商城项目之购物数量加减（3）

我们在购买宝贝的时候，购物的数量，经常是我们需要使用的，如下所示：

在宝贝详情页里：

http://

在购物车里：

现在就为大家介绍这个小组件，在小程序中，该如何去写

下图为本项目的图：

wxml：

-

+

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 ? 'disablehttp://d' : 'normal';

// 将数值与状态写回

http:// this.setData({

num: num,

minusStatus: minusStatus

});

},

/* 点击加号 */

bindPlus: function() {

var num = this.data.num;

// 不作过多考虑自增1

tkAZcwVqM 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

});

}

})

运行结果：

demo下载地址：商城购物数量加减

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。