微信小程序实现留言版的界面,主要涉及到了留言以及回复留言的界面。再设计的过程中,主要参考的是微信朋友圈的界面样式进行设计的。但仍存在瑕疵,同时有参考帖子提供的思路微信小程序第二篇:关于评论,和回复,以及再回复的实现和思考。
在设计的时候,由于后台传给我的只有一个留言信息的数组,所以我在request(后台传来的数据是根据最新时间进行排序的)后,对数据进行下面的处理,将存在的数据通过answer的值(answer=0就是默认留言)来存放到两个数组中msgReply[ ] 和 msgLeave[ ] 中
let msgLeave = []
let msgReply = []
res.data.data.forEach(element => {
if (element.answer === 0) {
element.children = []
msgLeave.push(element)
} else {
msgReply.push(element)
}
})
msgReply = msgReply.reverse() // 由于留言信息是通过最新时间返回的,这个回复的留言,应该是后留言的信息后显示,所以使用reverse()对数组重新排序
msgLeave.forEach(element => {
msgReply.forEach(element1 => {
if (element1.answer === element.id) {
element1.toAuthor = element.author
element.children.push(element1)
}
})
})
在设计的过程中,由于底部会有一个导航栏,所以我将input框设计在页面的头部,那么此时需要考虑的一个问题就是——将input框悬挂在页面的顶部。
wxml 设计
<view class="page-section">
<view class="textarea-wrp">
<textarea class="input_content" auto-height />
<button type="primary" bindtap='sendComment' class="btn">发送</button>
</view>
</view>
<view class="msg_detail ">
留言的显示
</view>
wxss 设计
.page-section{
position: fixed;
width: 100%;
/* margin-bottom: 60rpx; */
}
textarea {
width: 700rpx;
padding: 20rpx 2px;
margin: 8px 8px 8px 0;
background: #fff;
}
.textarea-wrp {
display: flex;
padding: 0 25rpx;
background: rgb(238, 238, 238);
}
.input_content {
background: #fff;
/* padding: 2px; */
font-size: 14px;
width: 90%;
height: 40px;
border-radius: 3px;
}
.btn {
width: 60px;
height: 30px;
font-size: 13px;
margin-top: 4%;
}
.msg_detail {
padding-top: 60px; /* 为了解决因为顶部悬停框position: fixed;引起的内容被遮挡的问题 */
}
关于小程序的具体页面详情,以及tabbar的解决见另外一篇博客