背景：我们有时候需要在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 () {
}
})简单效果图如下：
以上完成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"
},希望以上对大家有所帮助，或者哪位大神有更好的方法欢迎分享。