推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 810|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(31) : 微信小程序之購物數量加減

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 17:01:04 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

我們在購買寶貝的時候,購物的數量,經常是我們需要使用的,如下所示:

在寶貝詳情頁里:


在購物車里:



現在就為大家介紹這個小組件,在小程序中,該如何去寫

下圖為本項目的圖:




wxml:

[html] view plain copy


  • <!-- 主容器 -->  
  • <view class="stepper">  
  •     <!-- 減號 -->  
  •     <text class="{{minusStatus}}" bindtap="bindMinus">-</text>  
  •     <!-- 數值 -->  
  •     <input type="number" bindchange="bindManual" value="{{num}}" />  
  •     <!-- 加號 -->  
  •     <text class="normal" bindtap="bindPlus">+</text>  
  • </view>  


wxss:


[css] view plain copy


  • /*全局樣式*/  
  • 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


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


運行結果:



demo下載地址:http://download.csdn.net/detail/michael_ouyang/9815524


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 全民娱乐棋牌明天送 重庆快乐10分平台 福彩36选七开奖结果 重庆天津时时彩网站 百搭麻将必胜口诀 F1赛车视频 体彩浙江6+1第18119期 天天捕鱼技巧视频 股来顺配资 上海天天彩选4开奖结果查询百度 今日世界杯比分 gpk钱龙捕鱼挂