html部分
在使用过程中html部分需要在元素中定义好索要操作的数据使用data-方式锁定,这里需要注意
<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部分
/* 计算器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部分
// 计算器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
哈哈,这两天很高产啊