0
收藏
评论

小程序购物计算器

购物计算器是非常常见的页面元素,这里分享出自己实现时候的代码,方便各位同学参考和借鉴,希望对大家有帮助

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
最后一次编辑于  07-30  (未经腾讯允许,不得转载)
复制链接赞 0收藏评论

2 个评论

  • 李军
    李军
    07-30

    哈哈,这两天很高产啊

    07-30
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-30
      高产赛母猪,谢谢李同学的支持^_^
      07-30
      赞同
      回复