Design of wechat applet message board

Wechat applet realizes the interface of message board , It mainly involves the message and the interface to reply to the message . In the process of redesign , The main reference is the interface style of wechat circle of friends . There are still flaws , At the same time, there are ideas provided by reference posts Wechat applet Part 2 ： About comments , And reply , And the realization and thinking of re reply .

In design , Because there is only an array of message information sent to me in the background , So I am request（ The data from the background is sorted according to the latest time ） after , Perform the following processing on the data , Pass the existing data through answer Value （answer=0 Is the default message ） To store in two arrays msgReply[ ] and msgLeave[ ] in

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() //  Because the message is returned through the latest time , This reply message , It should be displayed after the message , So use reverse() Reorder the array 
        msgLeave.forEach(element => {
    
          msgReply.forEach(element1 => {
    
            if (element1.answer === element.id) {
    
              element1.toAuthor = element.author
              element.children.push(element1)
            }
          })
        })

In the process of design , Because there will be a navigation bar at the bottom , So I will input The box is designed at the head of the page , Then a problem to consider at this time is —— take input The box hangs at the top of the page .

wxml Design

<view class="page-section">
  <view class="textarea-wrp">
   <textarea class="input_content" auto-height />
   <button type="primary" bindtap='sendComment' class="btn"> send out </button>
  </view>
</view>
<view class="msg_detail ">
	 Message display 
</view>

wxss Design

.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; /*  To solve this problem, because the top hover box position: fixed; The content is blocked  */
}

Specific page details about the applet , as well as tabbar See another article for the solution Blog