微信小程序评论功能

本文介绍了如何在微信小程序中实现评论功能。首先展示了代码结构,包括Utils.js中的时间格式化函数,然后详细讲解了评论界面的JS部分,包括获取和格式化日期,以及评论数据的展示。此外,还提到了页面加载、上拉加载更多评论和表情选择等功能的实现。
摘要由CSDN通过智能技术生成

效果展示:
在这里插入图片描述
在这里插入图片描述
代码部分:
首先建完小程序项目后 会有一个自动生成的utils 文件。
Utils.js:
var ossAliyuncs = “http://soupu.oss-cn-shanghai.aliyuncs.com”;

function formatTime(date) {
var year = date.getFullYear() //获取年
var month = date.getMonth() + 1 //获取月
var day = date.getDate() //获取日

var hour = date.getHours() //获取小时
var minute = date.getMinutes() //获取分钟
var second = date.getSeconds() //获取秒

return [year, month, day].map(formatNumber).join(’-’) + ’ ’ + [hour, minute, second].map(formatNumber).join(’:’)
}

function formatDate(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

return [year, month, day].map(formatNumber).join(’-’)
}

function formatNumber(n) {
n = n.toString()
return n[1] ? n : ‘0’ + n
}

module.exports = {
formatTime: formatTime,
formatDate: formatDate,
ossAliyuncs: ossAliyuncs
}
接下来是我们创建的评论界面代码:
Js:
var util = require("…/…/utils/util")

Page({
data: {
isShow: false,//控制emoji表情是否显示
isLoad: true,//解决初试加载时emoji动画执行一次
content: “”,//评论框的内容
isLoading: true,//是否显示加载数据提示
disabled: true,
cfBg: false,
_index: 0,
detail:
{
},
comments: [
{
avatar: util.ossAliyuncs + “/images/banner6.jpg”,
uName: “一朵奇葩向阳开”,
time: “2016-12-11”,
content: "门前大桥下,游过一群鸭~。
},
{
avatar: util.ossAliyuncs + “/images/banner2.jpg”,
uName: “一朵奇葩向阴开”,
time: “2016-12-11”,
content: "快来快来数一数~。
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 24678~ "
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 24678~ "
}
],
emo

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值