uniapp 微信小程序留言板+动态显示新增留言

功能介绍：实现一个留言板的显示，以及留言后可以动态显示。

话不多说，let's start !

先上页面(略丑，非重点)

上页面代码（头像图片暂且写死的）：

<view class="uni-padding-wrap">
	<form @submit="commitComments">
		<textarea class="contentTextArea" name="commentContent" v-model="commentContent" placeholder="请输入您的反馈......"></textarea>
		<button class="commitButton" formType="submit">反馈</button>
	</form>		
	<view class="uni-comment">
		<view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index">
			<view class="uni-comment-face">
				<image src="../../static/head.jpg" mode="widthFix"></image>
			</view>
			<view class="uni-comment-body">
				<view class="uni-comment-top">
					<text>{{commentsList.nickname==''||commentsList.nickname==null?'匿名':commentsList.nickname}}</text>
				</view>
				<view class="uni-comment-date">
					<text>{{commentsList.created_at}}</text>
				</view>
				<view class="uni-comment-content">{{commentsList.content}}</view>
			</view>
		</view>
	</view>
</view>

上样式代码：

        .uni-padding-wrap {
		padding: 30upx;
	}

	view {
		font-size: 28upx;
	}

	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #e9e7ef;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #e9e7ef;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #0A98D5;
		font-size: 24upx;
	}

	.uni-comment-date {
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: gray;
	}

	.uni-comment-date view {
		color: #666666;
		font-size: 24upx;
		line-height: 38upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
	.commitButton{
		
		color: white;
		width: 90%;
		margin: 0rpx auto;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 37rpx;
		background: linear-gradient(left top,#86B6FD, #8fc9fc,#86B6FD);
	}
	.contentTextArea{
		font-size: 30rpx;
		height: 170rpx;
		border:1rpx solid #e9e7ef;
		width: 86%;
		margin: 0rpx auto;
		margin-bottom: 15rpx;
		padding: 20rpx 0 0 20rpx;
		border-radius: 6rpx;
	}

记得在data中加上：

return {
		commentsList:[],
		index:'',
		nickname:'',
		created_user_id:'',
		commentContent:'',
		}

首先我们做显示，即获取留言列表接口并展示(如下图所示，将数据存在commentsList)：

uni.request({
	url: 'http://xxx/xxx',
	method: 'GET',
	data: {},
	success: res => {				
		this.commentsList=res.data.data;
	},
	fail: () => {},
	complete: () => {}
});

此时你是可以正常显示了，接下来我们做添加留言以及动态显示。在method中写下点击留言事件的方法，代码如下：

重要是两个步骤：1⃣️请求添加接口，传递输入的留言内容及其他参数；2⃣️添加成功后动态在显示界面插入新留言。

commitComments() {
                //这里定义你自己要请求添加留言接口带的值，我是从接口获取到了
		var created_user_id = this.created_user_id;
		var content = this.commentContent;
		var nickname = this.nickname;
		var commentsList=this.commentsList;
		uni.request({	
				url: 'http://xxxx/xxx/create,
				method: 'POST',
				header: {
					'content-type': "application/x-www-form-urlencoded"
				},
                //因为我要传递数组格式的comment:{content:'',userid:''}给后台所以这样写，你直接传字段的话就去掉前面的comment和中括号就好了。
				data: {
					'comment[content]': content,					
					'comment[created_user_id]': created_user_id,
				},
				success: function(res) {
					if (res.data.success == 1) {
						uni.showToast({
							icon: 'success',
							title: '留言成功'
						});	
                              //这是重点，意思是动态添加，使用unshift就插在前面，也可以用push							
						commentsList.total += 1;
						commentsList.unshift({
							"nickname": nickname,
							"content":content,
							"id":res.data.id,									
						});									
					} else {
						uni.showToast({
							title: res.data.data,
							icon: "none"
						});
					}
				}
			})
	},

然后这个功能就到此结束了。

❤️感谢观赏！