一、在wxml中添加scroll-view

<view>
...
  <scroll-view class="scrollarea" scroll-y="true" scroll-into-view="{{bottomViewId}}" scroll-with-animation="true" 
  bindscroll="messageListScrolling" enable-back-to-top="true" type='list'>
    <view class="box" wx:for="{{content}}" wx:key="this" id="item{{index}}">
        <view class="item" wx:if="{{index%2 == 0}}">
          <view class="mineTextBox">
            <text class="mineText">{{content[index].text}}</text>
          </view>
        </view>
  
        <view class="item" wx:if="{{index%2 == 1}}">
          <view class="himTextBox">
            <text class="himText">{{content[index].text}}</text>
          </view>
        </view>
      </view>
...
</view>

在scroll-view中，我添加了一个view用来包裹对话列表，这里主要通过设置scroll-y="true"来允许纵向滚动、croll-into-view="{{bottomViewId}}"来滚动至指定的view

二、js代码

Page({
  data: {
    bottomViewId: 0,
    content : [],
  }, 
  sendMess() {
    // 这里写你添加到messageList的代码
    content.push({
      id : 0,// 对话发送，为0
      text : "问题"
    })
    content.push({
      id : 1,// 对话回复，为1
      text : "回复"
    })
    // 定位到最后一行
    setTimeout(() => {
      that.setData({bottomViewId: `item${that.data.content.length-1}`,
    })
  }
})

三、wxss样式代码

/**chat.wxss**/
.scrollarea {
  background: linear-gradient(to bottom, #b9deff, #FFFFFF);
  width: 100%;
  max-height: 79vh;
  min-height: 744px;
  overflow: auto;
}
.box {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 10px;
    margin-bottom: 2px;
}
.item {
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.mineText {
    font-size: 16px;
    color: black;
}
.himText {
    font-size: 16px;
    color: black;
}

参考

微信小程序中 scroll-view滚动条始终在最底部