微信小程序实战商城体系

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

咱俩在采购宝贝的时候,购物的数额,日常是大家需求动用的,如下所示:

在宝贝详情页里:

必发bifa88手机客服端 1

在购物车里:

必发bifa88手机客服端 2

 

近日就为大家介绍这几个小组件,在小程序中,该如何去写

下图为本项目标图:

必发bifa88手机客服端 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. 必发bifa88手机客服端,    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
        });
    }
    

    })

运作结果:

必发bifa88手机客服端 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)

微信小程序之仿Taobao分类入口 ——
微信小程序实战商城体系(2)

 

愈来愈多小程序的教程请查看:http://blog.csdn.net/michael_ouyang/article/details/54700871

多谢观望,不足之处,敬请指点

 

 

 

翻阅全文      

       
版权申明:本文为博主原创小说,转发务必申明出处,http://blog.csdn.net/michael\_ouyang。     

 

相关文章