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>{{ated_at}}</text>
</view>
<view class="uni-comment-content">{{t}}</view>
</view>
</view>
</view>
</view>
上样式代码：
.uni-padding-wrap {
padding: 30upx;
}
view {
font-size: 28upx;
}
.uni-comment {
padding: 5rpx 0;
display: flex;
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 {
.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_ur_id:'',
许镜清简介commentContent:'',
}
⾸先我们做显⽰，即获取留⾔列表接⼝并展⽰(如下图所⽰，将数据存在commentsList)：
url: 'xxx/xxx',
method: 'GET',
data: {},
success: res => {
},
fail: () => {},
complete: () => {}
});
此时你是可以正常显⽰了，接下来我们做添加留⾔以及动态显⽰。在method中写下点击留⾔事件的⽅
法，代码如下：重要是两个步骤：1 请求添加接⼝，传递输⼊的留⾔内容及其他参数；2 添加成功后动态在显⽰界⾯插⼊新留⾔。
败在细节commitComments() {
//这⾥定义你⾃⼰要请求添加留⾔接⼝带的值，我是从接⼝获取到了
var created_ur_id = ated_ur_id;
var content = tContent;
var nickname = this.nickname;
var tsList;
url: 'xxxx/xxx/create,
method: 'POST',
header: {
'content-type': "application/x-www-form-urlencoded"
},
//因为我要传递数组格式的comment:{content:'',urid:''}给后台所以这样写，你直接传字段的话就去掉前⾯的comment和中括号就好了。 data: {
'comment[content]': content,
朱元思'comment[created_ur_id]': created_ur_id,
},
success: function(res) {
if (res.data.success == 1) {
uni.showToast({
icon: 'success',
title: '留⾔成功'
});
//这是重点，意思是动态添加，使⽤unshift就插在前⾯，也可以⽤push
commentsList.unshift({
"nickname": nickname,
"content":content,
"id":res.data.id,
});
} el {
uni.showToast({
title: res.data.data,
刘冀民icon: "none"
});
}
}
宋代服饰})
禁毒教案小学},
然后这个功能就到此结束了。
❤ 感谢观赏！
