上一节我们为大家实现了发表动态页面的实现，这一节为大家实现“动态详情的页面”
实现效果：
image.png
这时候我们是不是就会很庆幸自己当时封装了“dynamic-template”的模板呢，这时候我们直接拿过来用就行了；
<import src="../../../templates/dynamicTemplate/dynamic-template" />
<import src="../../../templates/commentTemplate/comment-template" />
<view class="innerContainer">
<template is="dynamicTemplate" data="{{...dynamicDetailData}}"></template>
<view class="commentHeader" hidden="{{commentList.length == 0}}">精彩评论</view>
<block wx:for="{{commentList}}" wx:for-item="comment">
<template is="commentTemplate" data="{{...comment}}"></template>
</block>
<view class="commentPostView">
<view class="line1"></view>
<view class="commentPostContainer">
<input class="inputView" placeholder="输入评论内容" confirm-type="done" bindblur="bindTextAreaBlur" value="{{commentText}}"></input>
<view catchtap="submitComment" class="postBtn">发送</view>
</view>
</view>
</view>
但是我们往下看 ，是不是我们还要封装一个评论列表的template呢，是的，没错 ，接下来我们继续封装
image.png
comment-template.wxml
<template name="commentTemplate">
<view class="commentContainer">
<view class="commentTopView">
<image class="commentUserAvatar" src="{{avatar}}" mode="aspectFill"></image>
<view class="comment-userNick-postDate">
<text class="commentUserNick" bindtap="sss">{{nick_name}}</text>
<text class="postDate">{{postDate}}</text>
</view>
</view>
<text class="commentContentText">{{text}}</text>
<view class="bottomLine"></view>
</view>
</template>
comment-template.wxss
.commentContainer{
display: flex;
flex-direction: column;
}
.commentTopView {
display: flex;
flex-direction: row;
}
.commentUserAvatar {
width: 70rpx;
height: 70rpx;
border-radius: 35rpx;
vertical-align: middle;
background-color: lightgray;
}
.comment-userNick-postDate {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.commentUserNick {
font-size: 24rpx;
color: #333;
}
.commentContentText {
font-size: 24rpx;
color: #555;
margin-top: 10rpx;
margin-left: 90rpx;
}
dynamicDeatil.json
{
"usingComponents": {},
"navigationBarTitleText":"动态详情"
}
dynamicDeatil.wxml
<import src="../../../templates/dynamicTemplate/dynamic-template" />
<import src="../../../templates/commentTemplate/comment-template" />
<view class="innerContainer">
<template is="dynamicTemplate" data="{{...dynamicDetailData}}"></template>
<view class="commentHeader" hidden="{{commentList.length == 0}}">精彩评论</view>
<block wx:for="{{commentList}}" wx:for-item="comment">
<template is="commentTemplate" data="{{...comment}}"></template>
</block>
<view class="commentPostView">
<view class="line1"></view>
<view class="commentPostContainer">
<input class="inputView" placeholder="输入评论内容" confirm-type="done" bindblur="bindTextAreaBlur" value="{{commentText}}"></input>
<view catchtap="submitComment" class="postBtn">发送</view>
</view>
</view>
</view>
dynamicDeatil.wxss
/* pages/home/dynamicDeatil/dynamicDeatil.wxss */
@import '/templates/dynamicTemplate/dynamic-template.wxss';
@import '/templates/commentTemplate/comment-template.wxss';
page{
height: 100%;
width: 100%;
}
.innerContainer{
margin: 0 30rpx 200rpx 30rpx;
height: 100%;
}
.contentImg {
margin-top: 20rpx;
width: 690rpx;
border-radius: 8rpx;
margin-bottom: 20rpx;
background-color: lightgray;
}
.commentHeader{
margin: 10rpx 0rpx 40rpx 0rpx;
}
.commentPostView{
position: fixed;
bottom: 0rpx;
height: 100rpx;
width: 780rpx;
left: -30rpx;
}
.line1{
height: 2rpx;
background-color:#f0f0f0;
margin:0rpx 0rpx 0rpx 0rpx;
}
.commentPostContainer{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.inputView{
line-height: 100rpx;
height: 100rpx;
margin-left: 60rpx;
font-size: 28rpx;
width: 500rpx;
}
.postBtn{
line-height: 100rpx;
margin-right: 30rpx;
font-size: 28rpx;
}
dynamicDeatil.js
// pages/home/dynamicDeatil/dynamicDeatil.js
var requestTool = require("../../../utils/request.js");
var utilTool = require("../../../utils/util.js");
const onfire = require("../../../utils/onfire.js");
Page({
/**
* 页面的初始数据
*/
data: {
dynamicId:"",
dynamicDetailData : {},
commentList:{},
commentText:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.dynamicId);
this.setData({
dynamicId: options.dynamicId
});
this.getDynamicDetailData();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
getDynamicDetailData:function(){
var that = this;
var paraData = {
dynamic_id: that.data.dynamicId
};
requestTool.getRequest('/dynamic/info', paraData, that.getDetailDataSuccess, that.getDetailDataFailed);
},
getDetailDataSuccess:function(data){
console.log("请求成功");
var detailData = {
};
detailData["_id"] = data._id;
detailData["postDate"] = utilTool.formatTime(data.timestamp, 'Y/M/D h:m:s');
detailData["user_id"] = data.user_id;
detailData["url"] = data.url;
detailData["text"] = data.text;
detailData["up_count"] = data.up_count;
detailData["comment_count"] = data.comment_count;
detailData["is_up"] = data.is_up;
detailData["avatar"] = data.avatar;
detailData["nick_name"] = data.nick_name;
detailData["isDetail"] = true;
var commentListDatas = [];
for (var idx in data.comment_list){
var commentData = data.comment_list[idx];
commentData["postDate"] = utilTool.formatTime(commentData.timestamp, 'Y/M/D h:m:s');
commentListDatas.push(commentData);
}
this.setData({
dynamicDetailData: detailData,
commentList: commentListDatas,
});
},
getDetailDataFailed:function(){
console.log("获取数据失败");
},
bindTextAreaBlur: function (e) {
console.log(e.detail.value);
this.setData({
commentText: e.detail.value
})
},
submitComment:function(){
if (!this.data.commentText){
wx.showModal({
title: '温馨提示',
content: '请输入评论内容',
showCancel:false,
});
return;
}
var that = this;
var paraData = {
dynamic_id: that.data.dynamicId,
text: that.data.commentText,
};
requestTool.postRequest('/dynamic/comment', paraData, that.commentSuccess, that.commentFailed);
},
commentSuccess:function(data){
console.log("评论成功");
this.setData({
commentText : "",
});
this.getDynamicDetailData();
onfire.fire("reloadDynamicFunction");
},
commentFailed:function(){
console.log("评论失败");
},
})
完结：
至此项目已经告一段落了 ，完结撒花 ✿✿ヽ(°▽°)ノ✿
项目下载地址：
项目下载地址
网友评论