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

2017-01-11

本系列为小技巧或知识点聚合,如果你想看更多相关内容,请在本系列文章的相关文章内查看:


一:支付倒计时


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


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

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


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


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


思路:


onLoad:function(options)调用倒计时方法函数

定义线程进行数据动态现实

日期转化成毫秒

定义线程动态显示

渲染倒计时

毫秒转成固定格式

处理分秒位数不足的补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

  }



})




tip:如果不进行位数补0

将会显示如下

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



二:滑动删除效果


分享者:zuoliangzhu


最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。


还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了。



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


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="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" 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":"http://www.see-source.com", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "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手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。




0
收藏