美文网首页
加减数量 小程序

加减数量 小程序

作者: 潇潇芭蕉 | 来源:发表于2019-07-30 15:00 被阅读0次
    2019-07-30_151134.png
    //data中赋上初始值
    data: {
    
        num: 1,
    
        price:1,
    
      }
    
      /* 加数 */
      addCount: function (e) {
        console.log("刚刚您点击了加1");
        var num = this.data.num;
        var price = this.data.price;
        // 总数量-1  
        if (num < 1000) {
          num++;      
        }
        this.setData({
          num: num,//加一后重新赋值
          price: price*num//加过数量后价格赋值
        });
      },
      /* 减数 */
      delCount: function (e) {
        console.log("刚刚您点击了减1");
        var num = this.data.num;
        var price = this.data.price;
        if (num > 1) {
          num--;
        }
        this.setData({
          num: num,
          price: price * num
        });
      },
    
      
    
    <view class='total'>
       <!-- <text>数量:</text><text class='num'>1</text><text>¥</text><text class='price'>{{price}}</text><text class='buy'>立即购买</text> -->
       <text>数量:</text>
      <view class="stepper">  
          <!-- 减号 -->  
          <text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  
          <!-- 数值 -->  
          <input class="number" type="number" bindchange="bindManual" value="{{num}}"  disabled="disabled"/>  
          <!-- 加号 -->  
          <text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  
      </view>  
        <view class='price'>¥{{price}}</view>
        <view class='buy' bindtap='nowbuy'>立即购买</view>
    </view>
    

    样式

    .total {
      width: 100%;
      color: #545454;
      font-size: 28rpx;
      background: white;
      padding-left: 30rpx;
      position: fixed;
      height: 100rpx;
      bottom: 0;
      left: 0;
      line-height: 100rpx;
      display: flex;
    }
    
    .total .num {
      color: #f44336;
      border: 1rpx solid #f44336;
      padding: 10rpx 20rpx;
      margin-right: 170rpx;
      line-height: 100rpx;
    }
    
    .total .price {
      color: #f44336;
      margin-left: 20%;
      font-size: 32rpx;
    }
    
    .total .buy {
      background: #f44336;
      color: white;
      text-align: center;
      padding: 0 60rpx;
      position: absolute;
      right: 0;
      top: 0;
      line-height: 100rpx;
      font-size: 32rpx;
    }
    /*数量加减*/
    .carts-num{
      position: absolute;
      left: 100rpx;
      bottom: 23rpx;
      display: flex;
      align-items: center;
      text-align: center; 
      height: 50rpx;
    }
    .view_text_center{
      border: 1rpx solid #ebebeb;
      font-size: 30rpx;  
      display: inline-block;
      color: #333;
      height: 50rpx;
      line-height: 50rpx;
      width: 76rpx;
      vertical-align: middle;
    }
    .carts-num .minus, .carts-num .plus{
      border: 1rpx solid #ebebeb;
      font-size: 30rpx;  
      display: inline-block;
      color: #333;
      height: 50rpx;
      line-height: 50rpx;
      width: 45rpx;
      vertical-align: middle;
    }
    
      
    /*加号和减号*/  
    .stepper .sign {  
        width: 20px;  
        line-height: 22px;  
        text-align: center;  
        float: left;  
    }  
      
    /*数值*/  
    .stepper .number {  
        width: 30px;  
        height: 20px;  
        float: left;  
         margin: 0 auto;   
        text-align: center;  
        font-size: 12px;  
        color: #000000;
        /*给中间的input设置左右边框即可*/  
        border-left: 1rpx solid #818284;  
        border-right: 1rpx solid #818284;  
        /* border: 1rpx solid #818284;   */
    }  
      
    /*普通样式*/  
    .stepper .normal{  
        color: black;  
    }  
    /*禁用样式*/  
    .stepper .disabled{  
        color: #ccc;  
    }  
    button{
      width: 90%;
      color: white;
      background:#DFB741;
      margin:30px auto;  
    }
    .stepper {  
        width:73px;  
        height: 22px;  
        /*给主容器设一个边框*/  
        border: 1rpx solid #818284;  
        border-radius: 3px;  
        margin:auto 0;  
        background: white;
    }
    

    相关文章

      网友评论

          本文标题:加减数量 小程序

          本文链接:https://www.haomeiwen.com/subject/ynlnrctx.html