Background: Sometimes we need to use some operations in wxml, including but not limited to four arithmetic operations, trinocular operations, etc. If we want to use some custom methods, we need to use wxs to achieve it. The following code briefly introduces the list The implementation method of the countdown, and the method of using wxs to convert the timestamp into the year, month, day, hour, minute, and second. See the code for details:
At present, the applet has added a live broadcast function. In order to add a countdown reminder to the live broadcast list, I simply used wxs in wxml. The specific code is as follows:
The wxml code is as follows:
<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>
The wxss code is as follows:
.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;
}The js code is as follows:
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 () {
}
})The simple effect diagram is as follows:
The above completes the requirement of wxs to realize the countdown of the list. The following code implements the method of converting timestamp to time through wxs in wxml. The code is as follows:
<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"
},I hope the above is helpful to everyone, or whoever has a better method is welcome to share.