[转]微信小程序的购物数量加减 —— 微信小程序实战商城系列(3)

By admin in 亚洲必赢app在哪下载 on 2018年10月13日

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144

咱俩在置办宝贝的时候,购物的多少,经常是咱们要用的,如下所示:

当宝贝详情页里:

亚洲必赢app在哪下载 1

以购物车里:

亚洲必赢app在哪下载 2

 

今日虽也大家介绍这小组件,在有点序中,该怎么去写

产图也本档之希冀:

亚洲必赢app在哪下载 3

 

 

wxml:

[html] view
plain
copy
print?

  1. <!– 主容器 –>  
  2. <view class=”stepper”>  
  3.     <!– 减号 –>  
  4.     <text class=”{{minusStatus}}” bindtap=”bindMinus”>-</text>  
  5.     <!– 数值 –>  
  6.     <input type=”number” bindchange=”bindManual” value=”{{num}}” />  
  7.     <!– 加号 –>  
  8.     <text class=”normal” bindtap=”bindPlus”>+</text>  
  9. </view>  







    +

wxss:

[css] view
plain
copy
print?

  1. /*全局样式*/  
  2. page {  
  3.     padding: 20px 0;  
  4. }  
  5.   
  6. /*主容器*/  
  7. .stepper {  
  8.     width: 80px;  
  9.     height: 26px;  
  10.     /*吃主容器设一个边框*/  
  11.     border: 1px solid #ccc;  
  12.     border-radius: 3px;  
  13.     margin:0 auto;  
  14. }  
  15.   
  16. /*加号和减号*/  
  17. .stepper text {  
  18.     width: 19px;  
  19.     line-height: 26px;  
  20.     text-align: center;  
  21.     float: left;  
  22. }  
  23.   
  24. /*数值*/  
  25. .stepper input {  
  26.     width: 40px;  
  27.     height: 26px;  
  28.     float: left;  
  29.     margin: 0 auto;  
  30.     text-align: center;  
  31.     font-size: 12px;  
  32.     /*于中的input设置左右边框即可*/  
  33.     border-left: 1px solid #ccc;  
  34.     border-right: 1px solid #ccc;  
  35. }  
  36.   
  37. /*常备样式*/  
  38. .stepper .normal{  
  39.     color: black;  
  40. }  
  41.   
  42. /*剥夺样式*/  
  43. .stepper .disabled{  
  44.     color: #ccc;  
  45. }  

    /全局样式/
    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;
    

    }

 

js:

[javascript] view
plain
copy
print?

  1. Page({  
  2.     data: {  
  3.         // input默认是1  
  4.         num: 1,  
  5.         // 使用data数据对象设置样式名  
  6.         minusStatus: ‘disabled’  
  7.     },  
  8.     /* 点击减号 */  
  9.     bindMinus: function() {  
  10.         var num = this.data.num;  
  11.         // 如果超过1时,才好减  
  12.         if (num > 1) {  
  13.             num –;  
  14.         }  
  15.         // 只有超过一桩的时段,才会normal状态,否则disable状态  
  16.         var minusStatus = num <= 1 ? ‘disabled’ : ‘normal’;  
  17.         // 将数值及状态写照回  
  18.         this.setData({  
  19.             num: num,  
  20.             minusStatus: minusStatus  
  21.         });  
  22.     },  
  23.     /* 点击加号 */  
  24.     bindPlus: function() {  
  25.         var num = this.data.num;  
  26.         // 不作了多考虑自增1  
  27.         num ++;  
  28.         // 只有超过一项的时光,才会normal状态,否则disable状态  
  29.         var minusStatus = num < 1 ? ‘disabled’ : ‘normal’;  
  30.         // 将数值及状态写照回  
  31.         this.setData({  
  32.             num: num,  
  33.             minusStatus: minusStatus  
  34.         });  
  35.     },  
  36.     /* 输入框事件 */  
  37.     bindManual: function(e) {  
  38.         var num = e.detail.value;  
  39.         // 将数值及状态写照回  
  40.         this.setData({  
  41.             num: num  
  42.         });  
  43.     }  
  44. })  

    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
        });
    }
    

    })

运行结果:

亚洲必赢app在哪下载 4

 

demo下载地址:http://download.csdn.net/detail/michael\_ouyang/9815524

 

 

再也多聊序的科目

 

 

微信开发者工具的快捷键

微信小序的文本结构 ——
微信小程序教程系列(1)

微信小序的生命周期实例演示 ——
微信小程序教程系列(2)

微信小程序的动态修改视图层的数据 ——
微信小程序教程系列(3)

微信小程序的新建页面 ——
微信小程序教程系列(4)

微信小程序的什么运用全局属性 ——
微信小程序教程系列(5)

微信小序的页面跳转 ——
微信小程序教程系列(6)

微信小序标题栏和导航栏的设置 ——
微信小程序教程系列(7)

微信小序的作用域和模块化 ——
微信小程序教程系列(8)

微信小程序视图层的数量绑定 ——
微信小程序教程系列(9)

微信小程序视图层的极渲染 ——
微信小程序教程系列(10)

微信小程序视图层的列表渲染 ——
微信小程序教程系列(11)

微信小程序视图层的沙盘 ——
微信小程序教程系列(12)

微信小程序wxss的尺寸单位rpx ——
微信小程序教程系列(13)

微信小序的网络要 ——
微信小程序教程系列(14)

微信小序的百度地图获取地理位置 ——
微信小程序教程系列(15)

微信小程序下百度api获取天气信息 ——
微信小程序教程系列(16)

微信小程序得到系统日期与时空 ——
微信小程序教程系列(17)

微信小序的顶部导航栏实例 ——
微信小程序实战系列(1)

微信小序之上拉加载(分页加载)实例 ——
微信小程序实战系列(2)

微信小序的轮播图实例 ——
微信小程序实战系列(3)

微信小序的仿android
fragment之可滑动的脚导航栏实例  ——
微信小程序实战系列(4)

 

微信小程序的登录页实例 ——
微信小程序实战系列(5)

微信小序的从定义toast实例 ——
微信小程序实战系列(6)

微信小序的于定义抽屉菜单(从下拉出)实例 ——
微信小程序实战系列(7)

微信小程序的于定义模态弹窗(带动画)实例 ——
微信小程序实战系列(8)

微信小序的侧栏分类 ——
微信小程序实战商城系列(1)

微信小序的学淘宝分类入口 ——
微信小程序实战商城系列(2)

 

更多聊序的课请查看:http://blog.csdn.net/michael_ouyang/article/details/54700871

多谢观看,不足之处,敬请指导

 

 

 

翻阅全文      

       
版权声明:本文也博主原创文章,转载务必注明出处,http://blog.csdn.net/michael\_ouyang。     

  • 正文就收录于以下专栏:
  • 微信小序栏目

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2018 亚洲必赢app官方下载 版权所有