微信小程序 讨论区留言间隔1分钟以上的显示时间
在讨论区里显示发言时间,1分钟以内的发言只在第一个发言时显示时间。看代码:
用下面这个方法获取数据库中的发言信息数组goodsMessageList,其中有发言信息,发言人信息和发言时间time字段(精确到分钟),这是发言时和信息一起存入数据库的,
这时用goodsMessageList.reverse()将数组倒序排列(这一步很重要!!),再用fort循环将goodsMessageList中的time 字段进行两两比较,如果一样就删除上一个,循环完成后,再将数组goodsMessageList的顺序反转回来,就完成任务了!
app.js中的方法
getGoodsMessageList: function () {
var goodsid = this.globalData.goodsInfo._id
return new Promise(function (resolve, reject) {
const db = wx.cloud.database()
wx.cloud.callFunction({
name: 'getGoodsMessageList',
data: {
goodsid
},
success: function (res) {
var goodsMessageList = res.result.goodsMessageList.list
console.log("goodsMessageList:", goodsMessageList)
var newGroodsMessageList = goodsMessageList**.reverse()**
for (var i = 1; i < newGroodsMessageList.length; i++) {
if (newGroodsMessageList[i].time == newGroodsMessageList[i - 1].time) {
delete newGroodsMessageList[i - 1].time
}
}
goodsMessageList = newGroodsMessageList.**reverse()**
resolve(goodsMessageList)
},
fail: console.error
})
})
},
页面中的js
app.getGoodsMessageList().then(res => {
var goodsMessageList = res
scrollTop = goodsMessageList.length * 500
console.log("scrollTop:", scrollTop)
that.setData({
screenHeight,
goodsMessageList,
scrollTop,
openid
})
if (goodsMessageList.length > 50) {
var num = goodsMessageList.length - 50
for (let i = 0; i < num; i++) {
that.removeMoveGoodsMessages(goodsMessageList[i]._id).then(res => {
console.log("removeMoveGoodsMessages res:", res)
})
}
}
})
发言的js
const app = getApp()
const utils = require('../../utils/time.js');
Page({
data: {
},
sendMessage: function (e) {
var that = this
var goodsid = app.globalData.goodsInfo._id
if (e.detail.value.message.length == 0) {
wx.showToast({
title: '请填写内容!',
icon: 'loading',
// duration: 5500
})
setTimeout(function () {
wx.hideToast()
}, 1000)
} else {
var message = e.detail.value.message
var time = utils.getTime()
const db = wx.cloud.database();
db.collection("goodsMessageList").add({
data: {
message,
goodsid,
time,
},
success: res => {
console.log("点击了")
that.setData({
currentMmessage: "",
})
},
fail: err => {
console.error("collection add fail", err)
wx.showToast({
title: '发送失败!',
icon: 'loading',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
},
complete: res => {
console.log("collection add complete")
}
})
}
},
})
utils中获取time的方法:
function getTime() {
var date = new Date();
//年
var Y = date.getFullYear();
//月
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
//日
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
//时
var h = date.getHours();
//分
var m = date.getMinutes();
//秒
var s = date.getSeconds();
var time = Y+"/"+M+'/'+D+' '+h+":"+m
// +":"+s
console.log("当前时间:",time);
return time;
}
//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
getTime
}
wxml 中的代码:
<scroll-view class="scrollview" scroll-top="{{scrollTop}}" style="background-color: rgb(233, 231, 231);" scroll-y>
<view class="detail" wx:key="id" wx:for="{{goodsMessageList}}" wx:item="item">
**<view class="time">{{item.time}}</view>**
<view class="otherMessage" wx:if="{{item._openid!=openid}}">
<image class="userinfo-avatar" src="{{item.avatarUrl}}" mode="cover"></image>
<view class="message">{{item.message}}</view>
</view>
<view class="myMessage" wx:if="{{item._openid==openid}}">
<image class="userinfo-avatar" src="{{item.avatarUrl}}" mode="cover"></image>
<view class="message" style="justify-content:flex-end;display:flex">
<view>
{{item.message}}
</view>
</view>
</view>
</view>
</scroll-view>
效果:

在微信小程序的讨论区,针对1分钟内连续的发言,仅展示首个发言的时间。通过获取数据库中的发言信息数组,倒序排列并两两比较时间,删除重复项,然后恢复原顺序,实现时间间隔的显示。
2187

被折叠的 条评论
为什么被折叠?



