微信小程序 讨论区留言间隔1分钟以上的显示时间

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

微信小程序 讨论区留言间隔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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值