欧美综合影院在线影院,国产精品女人久久久久久,日韩精品无码去免费专区,樱花草在线社区WWW日本影院

首頁 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁 > 小程序資訊 > 小程序常見問題
秀杰實戰(zhàn)教程系列《四》：倒計時組件，LXStepper組件-商品數(shù)量加減 ...
時間：2016-10-18 16:22:00
一：倒計時組件：適用于電商應(yīng)用的限時團購、商品秒殺等
先來看下最終效果：


git源：http://git.oschina.net/dotton/CountDown

分步驟-性子急的朋友，可以直接看最后那段代碼。

wxml文件放個text

<text>second: {{second}} micro second:{{micro_second}}</text>
在js文件中調(diào)用

function countdown(that) {
  var second = that.data.second
  if (second == 0) {
    // console.log("Time Out...");
    that.setData({
      second: "Time Out..."
    });
    return ;
  }
  var time = setTimeout(function(){
    that.setData({
      second: second - 1
    });
    countdown(that);
  }
  ,1000)
}

Page({
    data: {
        second: 3
    },
    onLoad: function() {
        countdown(this);
    }
});
運行驗證下，從10走到1s，然后顯示時間到。

于是繼續(xù)將毫秒完善，注意毫秒的步長受限于系統(tǒng)的時間頻率，于是我們精確到0.01s即10ms

js

/* 秒級倒計時 */
function countdown(that) {
  var second = that.data.second
  if (second == 0) {
    that.setData({
      second: "Time out!",
      micro_second: "micro_second too."
    });
    clearTimeout(micro_timer);
    return ;
  }
  var timer = setTimeout(function(){
    that.setData({
      second: second - 1
    });
    countdown(that);
  }
  ,1000)
}

/* 毫秒級倒計時 */
// 初始毫秒數(shù)，同時用作歸零
var micro_second_init = 100;
// 當前毫秒數(shù)
var micro_second_current = micro_second_init;
// 毫秒計時器
var micro_timer;

function countdown4micro(that) {
  if (micro_second_current <= 0) {
    micro_second_current = micro_second_init;
  }
  micro_timer = setTimeout(function(){
    that.setData({
      micro_second: micro_second_current - 1
    });
    micro_second_current--;
    countdown4micro(that);
  }
  ,10)
}

Page({
    data: {
        second: 2,
        micro_second: micro_second_init
    },
    onLoad: function() {
        countdown(this);
        countdown4micro(this);
    }
});
wxml文件

<text style="display: block;">second: {{second}}s</text>

<text>{{micro_second}}</text>
如此，當秒級運行完畢時，毫秒級timer即clearTimeout，并將字本顯示為'micro_second too'

再添加一個countdown4micro方法，使得顯示剩余 0:3:19 89這樣形式的倒數(shù)

function dateformat(second) {
    var dateStr = "";
    var hr = Math.floor(second / 3600);
    var min = Math.floor((second - hr * 3600) / 60);
    var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
    dateStr = hr + ":" + min + ":" + sec;
    return dateStr;
}
目前有2個時鐘，影響性能，合并下去掉countdown，于是countdown4micro變成以下的樣子：

function countdown4micro(that) {

    var loop_second = Math.floor(loop_index / 100);
    // 得知經(jīng)歷了1s
    if (cost_micro_second != loop_second) {
        // 賦予新值
        cost_micro_second = loop_second;
        // 總秒數(shù)減1
        total_second--;

    }
      // 每隔一秒，顯示值減1; 渲染倒計時時鐘
    that.setData({
      clock:dateformat(total_second - 1)
    });

      if (total_second == 0) {
        that.setData({
          // micro_second: "",
          clock:"時間到"
        });
        clearTimeout(micro_timer);
        return ;
      }    

  if (micro_second_current <= 0) {
    micro_second_current = micro_second_init;
  }
  micro_timer = setTimeout(function(){
    that.setData({
      micro_second: micro_second_current - 1
    });
    micro_second_current--;
    // 放在最后++，不然時鐘停止時還有10毫秒剩余
    loop_index ++;
    countdown4micro(that);
  }
  ,10)
}
如此這般，毫秒與時分秒是分別運行渲染的，再次改造，程序可讀性更好。dateformat針對于毫秒操作，而不接受秒為數(shù)。同時還省卻了計算100次為1s的運算

/** 
 * 需要一個目標日期，初始化時，先得出到當前時間還有剩余多少秒
 * 1.將秒數(shù)換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供一個時鐘，每10ms運行一次，渲染時鐘，再總ms數(shù)自減10
 * 3.剩余的秒次為零時，return，給出tips提示說，已經(jīng)截止
 */

// 定義一個總毫秒數(shù)，以一分鐘為例。TODO，傳入一個時間點，轉(zhuǎn)換成總毫秒數(shù)
var total_micro_second = 2 * 1000;

/* 毫秒級倒計時 */
function countdown(that) {
      // 渲染倒計時時鐘
      that.setData({
          clock:dateformat(total_micro_second)
      });

      if (total_micro_second <= 0) {
          that.setData({
              clock:"已經(jīng)截止"
          });
          // timeout則跳出遞歸
          return ;
      }    
      setTimeout(function(){
        // 放在最后--
        total_micro_second -= 10;
        countdown(that);
    }
    ,10)
}

// 時間格式化輸出，如3:25:19 86。每10ms都會調(diào)用一次
function dateformat(micro_second) {
      // 秒數(shù)
      var second = Math.floor(micro_second / 1000);
      // 小時位
      var hr = Math.floor(second / 3600);
      // 分鐘位
      var min = Math.floor((second - hr * 3600) / 60);
      // 秒位
    var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
    // 毫秒位，保留2位
    var micro_sec = Math.floor((micro_second % 1000) / 10);
    return hr + ":" + min + ":" + sec + " " + micro_sec;
}

Page({
    data: {
        clock: ''
    },
    onLoad: function() {
        countdown(this);
    }
});
經(jīng)過如上優(yōu)化，代碼量減少一半，運行效率也高了。

二：LXStepper組件-商品數(shù)量加減：適用于購物車商品數(shù)量的加減

翻看了個文檔，微信沒有提供現(xiàn)成的組件，于是寫了這個小widget。


總體思路：

最左邊框，最右邊框由最后外層的容器的border-left與border-right設(shè)定；中間2段由input來設(shè)定；左右按鈕不設(shè)邊框，圓角效果由最外面容器來設(shè)定，這樣剛好實現(xiàn)了一個耳熟能詳?shù)膕tepper樣式。

布局：
1.1 準備一個容器view，設(shè)置它的寬為width: 70px;height: 21px;邊框顏色為#ccc灰色；圓角3px;

1.2 內(nèi)置3個組件，分別是左text，中input，右text，之所以不用button是因為系統(tǒng)自帶的button帶了樣式，為了遵守設(shè)計規(guī)范，不去重寫button的樣式。其中input的默認高度是21px。寬度分別為19px，30px，19px，之所以是19px，是因為容器帶了左右邊距，共占據(jù)了2px。

1.3 3個組件都是文字居中，text-align: center實現(xiàn)；垂直居中使用line-height: 21px來實現(xiàn)

1.4 3個組件都是向左浮動，由于我們計算好3個組件的寬度絕對值，于是不必設(shè)定加號按鈕的浮動float: right


布局文件代碼

<!-- Stepper容器 -->
<view class="stepper">
    <!-- 減號 -->
    <text>-</text>
    <!-- 數(shù)值 -->
    <input type="number" value="{{num}}" />
    <!-- 加號 -->
    <text>+</text>
</view>
樣式表代碼

/*stepper容器*/
.stepper {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 70px;
    height: 21px;
    margin:0 auto;
}


/*加號與減號*/
.stepper text {
    width: 19px;
    height: 28px;
    line-height: 21px;
    text-align: center;
    float: left;
}


/*數(shù)值*/
.stepper input {
    float: left;
    margin: 0 auto;
    width: 30px;
    text-align: center;
    font-size: 12px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
綁定事件
2.1 準備兩個按鈕樣式分別對應(yīng)普通與禁用狀態(tài)

/*普通樣式*/
.stepper .normal{
    color: black;
}

/*禁用樣式*/
.stepper .disabled{
    color: #ccc;
}
還要準備一個data的值對象，用于監(jiān)測數(shù)值與狀態(tài)的改變：

data: {
    num: 1,
    minusStatus: 'disabled'
}
2.2 加號與減號事件

2.2.1 綁定text事件bindtap，分別是bindMinus，bindPlus。按如下處理：取出data中的num值后作自增與自減，對于自減操作要先判斷是否大于1才做自減操作，也就是說已經(jīng)是1的時候，就不要自減了

2.2.2 當num已經(jīng)為1的時候，我們將減號按鈕設(shè)置為disabled樣式，一旦大于1，又變回normal狀態(tài)，加減事件均要如此處理，不然到了臨界值1的時候，回不到normal狀態(tài)

js代碼：

bindMinus: function() {
    var num = this.data.num;
    // 如果只有1件了，就不允許再減了
    if (num > 1) {
        num --;
    }
    // 只有大于一件的時候，才能normal狀態(tài)，否則disable狀態(tài)
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 將數(shù)值與狀態(tài)寫回
    this.setData({
        num: num,
        minusStatus: minusStatus
    });
},
效果如圖，注意減號是灰色的#ccc


2.3 文本框輸入事件

2.3.1 在wxml文件中的\<input\>監(jiān)聽值變更事件bindchange="bindManual"。注：bindchange是失去焦點才會調(diào)用一次的，而bininput是每當有值有改變會有調(diào)用一次，敲打123，則會產(chǎn)生值1，12，123三次，比較適合于輸入驗證。

2.3.2 實現(xiàn)bindManual

bindManual: function(e) {
    var num = e.detail.value;
    // 將數(shù)值與狀態(tài)寫回
    this.setData({
        num: num
    });
}
這個步驟看似多余，實則為了num個數(shù)同步，以作為提交到網(wǎng)絡(luò)數(shù)據(jù)時是真正的data.num，而不是input手工改寫的數(shù)值
微信小程序開發(fā)系列分析《一》視圖層
zhi_chao：小程序進階實戰(zhàn)進階：豆瓣電影demo布局搭建
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358