欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序(十一)在wxml中使用自定义函数

程序员文章站 2022-07-12 10:00:56
...

背景:我们有时候需要在wxml中使用一些运算,包括但不限于四则运算、三目运算等,我们如果想要使用自定义的一些方法,就需要使用wxs来实现了,下面代码简单介绍了列表中倒计时的实现方法,以及使用wxs把时间戳转换为年月日时分秒的方法。详见代码:

目前小程序增加了直播功能,为了在直播列表中加上开播倒计时提醒,我在wxml中简单使用了wxs实现,具体代码如下:

wxml代码如下:

<wxs module="fn">
    module.exports = {
        formatterTimer: function (nowTime, compareTime) {
            var result = {};
            var nowTime = getDate().getTime();// 当前时间的时间戳 也就是系统时间戳
            var futureTime = compareTime * 1000;// 比较时间的时间戳
            // console.log("nowTime=="+nowTime);
            // console.log("compareTime=="+compareTime);
            // 未来的时间减去现在的时间 ;
            var resTime = (futureTime - nowTime) / 1000;
            // console.log("resTime=="+resTime);
            // 结束时间
            var zero = futureTime - nowTime;
            if (zero >= 0) { // 认为还没有到达结束的时间
                result.d_d = (Math.floor(resTime / 86400)) < 10 ? '0' + (Math.floor(resTime / 86400)) : (Math.floor(resTime / 86400));
                result.h_h = (Math.floor(resTime / 3600) % 24) < 10 ? '0' + (Math.floor(resTime / 3600) % 24) : (Math.floor(resTime / 3600) % 24);
                result.m_m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
                result.s_s = (resTime % 60) < 10 ? '0' + (resTime % 60) : (resTime % 60);
                result.status = true;
            } else {
                result.d_d = '00';
                result.h_h = '00';
                result.m_m = '00';
                result.s_s = '00';
                result.status = false;
            }
            // console.log(JSON.stringify(result));
            return result.d_d+"天"+result.h_h+"小时"+result.m_m+"分钟";
        }

}
  </wxs>
<view class="main">
    <block wx:for="{{roomData}}" wx:key="{{index}}">
        <navigator class="live-play-item clearfix" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
            <view class="live-play-status">
                <text wx:if="{{item.live_status==101}}" class="live-play-text playing">直播中</text>
                <text wx:elif="{{item.live_status==105}}" class="live-play-text playpause">暂停中</text>
                <text wx:elif="{{item.live_status==102}}" class="live-play-text playyu">未开始</text>
                <text wx:elif="{{item.live_status==103}}" class="live-play-text playend">已结束</text>
            </view>
            <view class="img-box">
                <image class="cover-img" mode="widthFix" src="{{item.anchor_img}}"></image>
            </view>
            <view class="title-box">
                <view wx:if="{{item.live_status==102}}" class="live-player-time">
                    距离开播:{{fn.formatterTimer(nowTime,item.end_time)}}
                </view>
                <view class="live-play-title">
                    {{item.name}}
                </view>
            </view>
        </navigator>
    </block>
    <view class="tips" wx:if="{{!hidden}}">~我是有底线的~</view>
</view>

wxss代码如下:

.main{
  padding:26rpx;
  background:#f5f5f5;
}
.clearfix::after{
  display:block;
  height:0;
  clear:both;
  content:'';
}
.live-play-item{
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  position:relative;
  /* border:1rpx solid red; */
  margin-bottom:40rpx;
  border-radius:16rpx;
}
.live-play-status{
  position:absolute;
  right:20rpx;
  top:18rpx;
}
.live-play-text{
  display:block;
  font-size:26rpx;
  position:relative;
}
.playing{
  color:#228b22;
}
.playpause{
  color:#d2691e;
}
.playyu{
  color:#ff0000;
}
.playend{
  color:#708090;
}
.live-play-text::before{
  display:inline-block;
  content:'';
  width:10rpx;
  height:10rpx;
  border-radius:100%;
  position:absolute;
  top:18rpx;
  left:-20rpx;
}
.playing::before{
  background:#228b22;
}
.playpause::before{
  background:#d2691e;
}
.playyu::before{
  background:#ff0000;
}
.playend::before{
  background:#708090;
}
.img-box{
  /* box-sizing:border-box; */
  /* width:336rpx; */
}
.cover-img{
  display:block;
  width:698rpx;
  /* height:336rpx; */
}
.title-box{
  box-sizing:border-box;
  text-align:left;
  padding:24rpx 20rpx;
  background:#ffffff;
}
.live-play-title{
  font-family: PingFangSC-Regular;
  font-size: 32rpx;
  color: #231815;
  letter-spacing: 0;
  display:-webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  line-height:32rpx;
}
.live-player-time{
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #231815;
  letter-spacing: 0;
  padding-bottom:16rpx;
}
.tips{
  text-align: center;
  font-size:26rpx;
  color:#333333;
}

js代码如下:

import util from '../../utils/util.js';
//获取应用实例
const app = getApp()
var page;//当前页
var start;//当前条
var limit = 10;//每页多少条
Page({
  /**
   * 页面的初始数据
   */
  data: {
    livePlayData:'',//直播数据
    roomData:'',//直播间数据
    total:'',//总数据
    hidden:true,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    page = 0;
    start = 0;
    /**
    * 调取直播数据
    */
   util.requestData('Live/liveroomlist', {
    start:0,
    limit:limit
    }, (res) => {
      if (res.data.errcode == '0') {
        var data = res.data;
        that.setData({
          livePlayData:data,
          roomData:data.room_info,
          total:data.total
        })
      } else {
        console.log(1);
      }
    }, (res) => {
      // 错误信息提示
      console.log(res);
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //做些什么...
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    /**
    * 调取直播数据
    */
   util.requestData('Live/liveroomlist', {
    start:0,
    limit:limit
    }, (res) => {
      // 隐藏导航栏加载框
      wx.hideNavigationBarLoading();
      // 停止下拉动作
      wx.stopPullDownRefresh();
      if (res.data.errcode == '0') {
        var data = res.data;
        that.setData({
          livePlayData:data,
          roomData:data.room_info,
          total:data.total,
          hidden:true
        })
      } else {
        console.log(1);
      }
    }, (res) => {
      // 错误信息提示
      console.log(res);
    })
    page = 0;
    start = 0;
    wx.stopPullDownRefresh()//得到结果后关掉刷新动画
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("下拉加载更多数据");
    var that = this;
    // 页数+1
    page = page + 1;
    start = page * limit;
    if(page*limit>=that.data.total){
      that.setData({
        hidden:false
      })
    }else{
       // 显示加载图标
       wx.showLoading({
        title: '玩命加载中',
      })
      /**
      * 调取下一页直播数据
      */
      util.requestData('Live/liveroomlist', {
        start:start,
        limit:limit
        }, (res) => {
          if (res.data.errcode == '0') {
            var data = res.data;
            var newRoomData = data.room_info;
            const oldData = that.data.roomData;
            that.setData({
              livePlayData:data,
              roomData:oldData.concat(newRoomData),
              total:data.total
            })
            // 隐藏加载框
            wx.hideLoading();
          } else {
            console.log("error");
            // 隐藏加载框
            wx.hideLoading();
          }
        }, (res) => {
          // 错误信息提示
          console.log(res);
        })

    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

简单效果图如下:

微信小程序(十一)在wxml中使用自定义函数

以上完成wxs实现列表倒计时的需求,下面代码在wxml中通过wxs实现时间戳转为时间的方法,代码如下:

<wxs module="fn">
    var change = function(value) {
  value = value.replace(".000+0000","Z");
     var time = getDate(value);
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    month = month < 10 ? "0" + month : month;
    date = date < 10 ? "0" + date : date;
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }
    module.exports.change = change
</wxs>
<view>{fn.change(time)}}</view>

 data: {
    // time:"2017-12-28T10:43:49Z"
    time:"2019-07-23T13:46:51.000+0000"
  },

希望以上对大家有所帮助,或者哪位大神有更好的方法欢迎分享。

相关标签: 微信小程序