微信小程序留言板设计

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