微信小程序小技巧系列《十二》支付倒计时效果，滑动删除效果 ... ... ...

由于web 经验弱爆- -  一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- - 

我居然忽略了生命周期，生命周期+线程不就完全OK吗～ 

事实证明，线程还是王道啊，一开始就应该这么搞嘛～

度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练

思路：

1. onLoad:function(options)调用倒计时方法函数
2. 定义线程进行数据动态现实
   1. 日期转化成毫秒
   2. 定义线程动态显示
      
   3. 渲染倒计时
      1. 毫秒转成固定格式
      2. 处理分秒位数不足的补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为页面跳转所带来的参数  
    new app.WeToast()  
    var that = this;  
    that.count_down();  
  },  
  onReady: function () {  
    // 页面渲染完成  
  },  
  onShow: function () {  
    // 页面显示  
  },  
  onHide: function () {  
    // 页面隐藏  
  },  
  onUnload: function () {  
    // 页面关闭  
  },  
  /* 毫秒级倒计时 */  
  count_down: function () {  
    var that = this  
    //2016-12-27 12:47:08 转换日期格式  
    var a = that.data.expireTime.split(/[^0-9]/);  
    //截止日期：日期转毫秒  
    var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);  
    //倒计时毫秒  
    var duringMs = expireMs.getTime() - (new Date()).getTime();  
    // 渲染倒计时时钟  
    that.setData({  
      clock: that.date_format(duringMs)  
    });  
    if (duringMs <= 0) {  
      that.setData({  
        clock: "支付已截止，请重新下单"  
      });  
      // timeout则跳出递归  
      return;  
    }  
    setTimeout(function () {  
      // 放在最后--  
      duringMs -= 10;  
      that.count_down();  
    }  
      , 10)  
  },  
   /* 格式化倒计时 */  
  date_format: function (micro_second) {  
    var that = this  
    // 秒数  
    var second = Math.floor(micro_second / 1000);  
    // 小时位  
    var hr = Math.floor(second / 3600);  
    // 分钟位  
    var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));  
    // 秒位  
    var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60;  
    return hr + ":" + min + ":" + sec + " ";  
  },  
  /* 分秒位数补0 */  
  fill_zero_prefix: function (num) {  
    return num < 10 ? "0" + num : num  
  }  
})  

637f7c43e0fea527c0a01a7f8390f60c.jpg (26.03 KB, 下载次数: 63)

下载附件

2018-2-25 14:57 上传

二：滑动删除效果

item的布局：

推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。

<view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam.id}}" class="item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{cardTeam.right}}px">  
        <image class="img" src="" mode="scaleToFill"></image>  
        <view class="number-wrapper">  
          <text class="name">{{cardTeam.name}}</text>  
          <view class="count-wrapper">  
            <view class="decrease-btn">-</view>  
            <text class="count">1</text>  
            <view class="increase-btn">+</view>  
          </view>  
          <view class="price-wrapper">  
            <text class="unit">¥</text>  
            <text class="price">99.80</text>  
          </view>  
        </view>  
        <view class="ok"><view class="inner-ok">确定</view></view>  
        <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>删除</view></view>  
      </view>  

主要是将删除按钮的设为绝对定位(position: absolute)：

.item .remove{  
    width: 60px;  
    height: 100%;  
    background-color: red;  
    position: absolute;  
    top: 0;  
    right: -60px;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  

Page({  
  data: {  
    cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}]  
  },  
  drawStart : function(e){  
     // console.log("drawStart");  
    var touch = e.touches[0];  
    startX = touch.clientX;  
    startY = touch.clientY;  
    var cardTeams = this.data.cardTeams;  
    for(var i in cardTeams){  
        var data = cardTeams[i];  
        data.startRight = data.right;  
    }  
    key = true;  
  },  
  drawEnd : function(e){  
    console.log("drawEnd");  
    var cardTeams = this.data.cardTeams;  
    for(var i in cardTeams){  
        var data = cardTeams[i];  
        if(data.right <= 100/2){  
            data.right = 0;  
        }else{  
            data.right = maxRight;  
        }  
    }  
    this.setData({  
        cardTeams:cardTeams  
    });  
  },  
  drawMove : function(e){  
      //console.log("drawMove");  
    var self = this;  
    var dataId = e.currentTarget.id;  
    var cardTeams = this.data.cardTeams;  
    if(key){  
        var touch = e.touches[0];  
        endX = touch.clientX;  
        endY = touch.clientY;  
        console.log("startX="+startX+" endX="+endX );  
        if(endX - startX == 0)  
           return ;  
        var res = cardTeams;  
           //从右往左  
            if((endX - startX) < 0){  
                for(var k in res){  
                    var data = res[k];  
                    if(res[k].id == dataId){  
                        var startRight = res[k].startRight;  
                        var change = startX - endX;  
                        startRight += change;  
                        if(startRight > maxRight)  
                            startRight = maxRight;  
                        res[k].right = startRight;  
                    }  
                }  
            }else{//从左往右  
                for(var k in res){  
                    var data = res[k];  
                    if(res[k].id == dataId){  
                        var startRight = res[k].startRight;  
                        var change = endX - startX;  
                        startRight -= change;  
                        if(startRight < 0)  
                            startRight = 0;  
                        res[k].right = startRight ;  
                    }  
                }  
            }  
            self.setData({  
                cardTeams:cardTeams  
            });  
    }  
  },  
  //删除item  
  delItem: function(e){  
    var dataId = e.target.dataset.id;  
    console.log("删除"+dataId);  
    var cardTeams = this.data.cardTeams;  
    var newCardTeams = [];   
    for(var i in cardTeams){  
        var item = cardTeams[i];  
        if(item.id != dataId){  
          newCardTeams.push(item);  
        }  
    }  
    this.setData({  
        cardTeams:newCardTeams  
     });  
  },  
  onLoad: function () {  
    console.log('onLoad:'+app.globalData.domain)  
  }  
})

drawStart用于记录手指触碰时的位置，drawMove记录手指滑动的位置，两者的差值就是删除按钮的偏移量

drawEnd手指抬起时触发，用于设置弹回、摊开效果。目前我的是超过一半自动弹开，不足一半自动收回。