微信小程序实战商城种类

By admin in 亚洲必赢app在哪下载 on 2019年2月6日

正文转自: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. 亚洲必赢app在哪下载,        // 不作过多考虑自增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)

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

 

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

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

 

 

 

读书全文      

       
版权评释:本文为博主原创文章,转发务必注脚出处,http://blog.csdn.net/michael\_ouyang。     

 

发表评论

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

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