zoukankan      html  css  js  c++  java
  • 微信小程序数量减

    <!-- 主容器 -->  
    <view class="stepper">  
        <!-- 减号 -->  
        <text class="{{minusStatus}}" bindtap="bindMinus">-</text>  
        <!-- 数值 -->  
        <input type="number" bindchange="bindManual" value="{{num}}" />  
        <!-- 加号 -->  
        <text class="normal" bindtap="bindPlus">+</text>  
    </view>  
    /*全局样式*/  
    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;  
    }  
    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 ? 'disabled' : 'normal';  
            // 将数值与状态写回  
            this.setData({  
                num: num,  
                minusStatus: minusStatus  
            });  
        },  
        /* 点击加号 */  
        bindPlus: function() {  
            var num = this.data.num;  
            // 不作过多考虑自增1  
            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  
            });  
        }  
    }) 

    转自:https://www.jianshu.com/p/a0c2c8712dab

  • 相关阅读:
    Sass--传多个参数
    Sass--传一个带值的参数
    Sass--传一个不带值的参数
    Sass--调用混合宏
    Sass--混合宏--声明宏
    Sass--伪类嵌套
    Sass-属性嵌套
    Sass--嵌套选择器
    Sass-局部变量和全局变量
    sass--变量
  • 原文地址:https://www.cnblogs.com/yyy251/p/12218094.html
Copyright © 2011-2022 走看看