微信小程序小技巧系列《十二》支付倒計時效果，滑動刪除效果 ... ...
發(fā)布時間：2018-02-06 16:43 所屬欄目：小程序開發(fā)教程
本系列為小技巧或知識點聚合，如果你想看更多相關(guān)內(nèi)容，請在本系列文章的相關(guān)文章內(nèi)查看：
一：支付倒計時
作者：莫蘭迪不會沒有瓶子，來自授權(quán)地址
由于web 經(jīng)驗弱爆- - 一開始我的思路是找事件，但是看了半天API 基本都是點擊觸摸，通過物理觸發(fā)- -
我居然忽略了生命周期，生命周期+線程不就完全OK嗎～
事實證明，線程還是王道啊，一開始就應該這么搞嘛～
度娘上面也看了很多都是用js寫的，but，可能剛做沒幾天吧，我對js與微信小程序掌握還不夠熟練
思路：
- onLoad:function(options)調(diào)用倒計時方法函數(shù)
-
定義線程進行數(shù)據(jù)動態(tài)現(xiàn)實
- 日期轉(zhuǎn)化成毫秒
- 定義線程動態(tài)顯示
-
渲染倒計時
- 毫秒轉(zhuǎn)成固定格式
- 處理分秒位數(shù)不足的補0
看代碼了
wxml：
-
<view class="pay_time"> <image src="{{imgUrls_pay_time}}"></image> <text>支付剩余時間：</text> <text>{{clock}} </text> </view>
wxjs：
-
// pages/order/take_order/pay/pay.js var app = getApp() Page({ data: { imgUrls_pay_time: '/image/icon_orderstatus_countdown.png', "productName": "", "productPrice": "", "payDetail": [], "wxPayMoneyDesc": "", "expireTime": "", clock: '' }, onLoad: function (options) { // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) new app.WeToast() var that = this; that.count_down(); }, onReady: function () { // 頁面渲染完成 }, onShow: function () { // 頁面顯示 }, onHide: function () { // 頁面隱藏 }, onUnload: function () { // 頁面關(guān)閉 }, /* 毫秒級倒計時 */ count_down: function () { var that = this //2016-12-27 12
