Fork me on GitHub

[小程序]-购物计算器写法

制作一个购物车计算器,如下图:

image

html部分

在使用过程中html部分需要在元素中定义好索要操作的数据使用data-方式锁定,这里需要注意

1
2
3
4
5
6
7
8
<view class='k-suan '>
<view class='k-label'>班级数量</view>
<view class='suanbox'>
<view class='addon' data-name='classNum' bindtap='bindPlus'></view>
<view class='cuton' data-name='classNum' bindtap='bindMinus'></view>
<input bindinput='bindManual' data-name="classNum" name="classNum"value='{{schoolInfo.message.classNum}}'></input>
</view>
</view>

wxss部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 计算器start */
.k-suan {
position: relative;
height: 80rpx;
border-bottom: 1rpx solid #eee;
line-height: 80rpx;
background-color: #fff
}

.k-suan .k-label {
width: 450rpx;
position: absolute;
left: 30rpx;
top: 5rpx;
font-size: 28rpx;
}

.k-suan .suanbox {
width: 231rpx;
height: 58rpx;
background-image: url(http://wechatpx.oss-cn-beijing.aliyuncs.com/suan.png);
background-size: 231rpx 58rpx;
background-repeat: no-repeat;
position: absolute;
right: 30rpx;
top: 12rpx;
}

.k-suan .suanbox .addon {
width: 72rpx;
height: 58rpx;
position: absolute;
right: 0;
top: 0;
}
.k-suan .suanbox .cuton {
width: 72rpx;
height: 58rpx;
position: absolute;
left: 0;
top: 0;
}
.k-suan .suanbox input {
width:90rpx;
height: 58rpx;
position: absolute;
right:72rpx;
top: 0;
text-align: center;
}
/* 计算器end */

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 计算器start
onsuanadd: function(e) {
var now = e.currentTarget.dataset.suan
var name = e.currentTarget.dataset.name
now++
this.setData({
[name]: now
})
},
onsuancut: function(e) {
var now = e.currentTarget.dataset.suan
var name = e.currentTarget.dataset.name
if (now > 0) {
now--
}
this.setData({
[name]: now
})
},
// 计算器end
支持作者