写一个无限级评论微信小程序代码
时间: 2023-03-24 11:01:22 浏览: 191
很高兴回答您的问题。以下是一个简单的无限级评论微信小程序代码示例:
```javascript
//app.js
App({
globalData: {
userInfo: null
}
})
//index.js
const app = getApp()
Page({
data: {
comments: [
{
id: 1,
content: '这个小程序很不错!',
children: [
{
id: 4,
content: '我也觉得很不错!',
children: []
}
]
},
{
id: 2,
content: '我觉得还有很多需要改进的地方。',
children: [
{
id: 3,
content: '比如什么?',
children: []
}
]
}
],
newComment: ''
},
onLoad: function () {
},
onNewCommentInput: function (e) {
this.setData({
newComment: e.detail.value
})
},
addComment: function () {
const newComment = {
id: Date.now(),
content: this.data.newComment,
children: []
}
this.setData({
comments: this.data.comments.concat(newComment),
newComment: ''
})
},
replyComment: function (e) {
const parentId = e.currentTarget.dataset.parentId
wx.navigateTo({
url: `/pages/reply/reply?id=${parentId}`
})
}
})
//reply.js
const app = getApp()
Page({
data: {
parentId: null,
parentContent: '',
newComment: ''
},
onLoad: function (options) {
const parentId = parseInt(options.id)
const parentComment = this.findCommentById(parentId, app.globalData.comments)
this.setData({
parentId,
parentContent: parentComment.content
})
},
onNewCommentInput: function (e) {
this.setData({
newComment: e.detail.value
})
},
addComment: function () {
const newComment = {
id: Date.now(),
content: this.data.newComment,
children: []
}
const parentComment = this.findCommentById(this.data.parentId, app.globalData.comments)
parentComment.children.push(newComment)
app.globalData.comments = app.globalData.comments
wx.navigateBack()
},
findCommentById: function (id, comments) {
for (let i = 0; i < comments.length; i++) {
const comment = comments[i]
if (comment.id === id) {
return comment
} else {
const childComment = this.findCommentById(id, comment.children)
if (childComment) {
return childComment
}
}
}
return null
}
})
```
这是一个简单的评论系统,用户可以添加新的评论或回复现有的评论,每个评论都可以有任意数量的回复。评论和回复都显示在同一个列表中,并且可以无限级嵌套。该小程序使用了微信小程序的模板语言和事件处理机制,以及JavaScript的基本语法和函数。如果您需要更详细的解释,请随时提出问题。
阅读全文