微信小程序（十一）在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"
  },

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

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

详解在微信小程序的JS脚本中使用Promise来优化函数处理

微信小程序在开发工具预览的圆角模糊效果在ios手机中不能使用

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

在webstorm开发微信小程序之使用阿里自定义字体图标的方法

微信小程序 - 在视图组件上绑定函数并携带参数（事件对象自定义属性传参）

在微信小程序中如何使用progress组件

在微信小程序中如何使用slider组件

在微信小程序中如何使用switch开关选择器

详解在微信小程序的JS脚本中使用Promise来优化函数处理

在微信小程序中如何使用slider设置数据值