微信小程序留言板设计

微信小程序实现留言版的界面，主要涉及到了留言以及回复留言的界面。再设计的过程中，主要参考的是微信朋友圈的界面样式进行设计的。但仍存在瑕疵，同时有参考帖子提供的思路微信小程序第二篇：关于评论，和回复，以及再回复的实现和思考。

在设计的时候，由于后台传给我的只有一个留言信息的数组，所以我在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的解决见另外一篇博客