大家好！我这几天在做一个聊天的功能，遇到了一个问题：每次进入聊天页面，聊天的消息都是从最上面的最旧消息开始显示，需要手动下滑到最底部查看最新消息，所以，请问一下，如何才能够在进入聊天页面时，像微信聊天一样，直接在页面底部看到最新的消息？是需要在wxml页面还是wxss页面设置？设置哪一项？非常感谢！

wxml页面代码：

<block class="overflow">
  <view wx:for="{{messageList}}" wx:key="messageList">
    <view class="rightBox" wx:if="{{item.openId === visitorId}}" data-msg="{{index}}" id='msg_{{index}}'>
      <view>
        <view class="createTime_R">{{item.createTime}}</view>
        <view class="right_message" wx:if="{{item.type=='text'}}">{{item.content}}</view>
        <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/>        
      </view>
      <image class="icon" src="{{icon_R}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" />
    </view>
    <view class="leftBox" wx:if="{{item.openId === serverId}}" data-msg="{{index}}" id='msg_{{index}}'>
      <image class="icon" src="{{icon_L}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" />
      <view>
        <view class="createTime_L">{{item.createTime}}</view>
        <view class="left_message" wx:if="{{item.type=='text'}}">{{item.content}} </view>
        <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/>
      </view>


    </view>
  </view>
  <view class="overflow_a"> </view>
</block>


<view class="sends">
  <image class="sends_a" src="{{imgUrl}}" bind:tap="sendImage" />
  <textarea class="sends_b" type="text" maxlength="-1" bindblur="message_blur" auto-height="true" value="{{content}}"></textarea>
  <view class="sends_c" bind:tap="send">发送</view>
</view>

wxss页面代码：

page {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}


.overflow{
  position: fixed;
  top: 300rpx;
  width: 710rpx;
  overflow: scroll;   /*auto  hidden scroll*/  
}
.overflow_a{
  margin-bottom: 110rpx;
}
.sends{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  height: 100rpx;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  background-color: white;
}
.sends_a{
  width: 60rpx;
  height: 50rpx;
  margin: 0rpx 20rpx;
}
.sends_b{
  width: 500rpx;
  border: solid black 1rpx;
  border-radius: 10rpx;
  margin: 0rpx 20rpx 0rpx 0rpx;
}
.sends_c{
  padding: 10rpx 30rpx;
}
.icon{
  margin: 10rpx 0rpx 0rpx 0rpx;
}
.rightBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin: 10rpx 20rpx 0rpx 0rpx;
}
.leftBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 10rpx 0rpx 0rpx 20rpx;
}
.right_message{
  width: 600rpx;
  text-align: right;
  padding: 0rpx 10rpx;
}
.left_message{
  width: 600rpx;
  text-align: left;
  padding: 0rpx 10rpx;
}
.image_content{
  width: 600rpx;
}
.createTime_L{
  font-size: x-small;
  text-align: center;
}
.createTime_R{
  font-size: xx-small;
  text-align: center;
}

js页面代码：

  onLoad(){   
    let that = this;
    let title = wx.getStorageSync('from');
    that.setData({
      title,
    });
    let visitorId='';  //来访者的openid
    let serverId='';  //客服的openid
    let my_openId = app.globalData.user_data.openid;  //拿到 本人 的openid
    let visitor_Id = wx.getStorageSync('visitor_Id');   //拿到 来访者 的openid，可能为空
    if (my_openId == "oi6wV5Gn558x5madg"  || my_openId == "oi6wV5qMAYQmm8To") {  //识别出本人的openid是客服人员时
      serverId = my_openId;    //本人的openid赋值给serverId，即赋值给客服id
      visitorId = visitor_Id;   //对方的openid赋值给来访者的openid   
    } else {   //识别出本人是来访者时
      if (title=="法律咨询") {
        serverId = "oi6wV558x5madg";    //对客服的openid赋值
        visitorId = my_openId;                         //将本人的openid赋值给来访者  
      } else if (title=="能力提升") {
        serverId = "oi6wV5HGqMAYQmm8To";    //对客服的openid赋值
        visitorId = my_openId;                         //将本人的openid赋值给来访者  
      } else if (title=="心理咨询") {
        serverId = "oi6wV5HGMSMAYQmm8To";    //对客服的openid赋值
        visitorId = my_openId;                         //将本人的openid赋值给来访者  
      };
    };
    that.setData({
      serverId,
      visitorId,
    });   
  
    wx.cloud.callFunction({  //这里调用云函数查询对话
      name:"messageList",
      data:{
        $url:"message",        //云函数路由参数
        visitorId:visitorId,   //本人的openid
        serverId:serverId,     //客服的openid
      }
    }).then(res=>{   
      let arr = res.result.data;
      // console.log("arr:",arr);
      let userInfo = {    //app.globalData.user_data;  就是来访者的个人信息
        gender:app.globalData.user_data.gender,
        id_name:app.globalData.user_data.id_name,
        openid:app.globalData.user_data.openid,
        phone_no:app.globalData.user_data.phone_no,
        orgaId:app.globalData.user_data.orgaId,
        orgaName:app.globalData.user_data.orgaName,
        unitId:app.globalData.user_data.unitId,
        unitName:app.globalData.user_data.unitName,
        user_name:app.globalData.user_data.user_name,
      };
      if(arr.length === 0){   //进行判断，如果没有数据则创建一个聊天
        wx.cloud.database().collection("message")
          .add({
            data:{
              Message:[],
              serverId,
              userInfo,
            }}
          )
      }
    });
  },
  onReady: function () {
    let that = this;
    let visitorId = that.data.visitorId;     //本人的openid，来访者
    let serverId = that.data.serverId;      //客服的openid
    let watch = db.collection('message')
    .where({
      _openid:_.eq(visitorId),
      serverId:_.eq(serverId),
    })
    .watch({
      onChange: (snapshot)=> {    //只要数据发生变化就会调用此方法
        that.setData({
          messageList:snapshot.docs[0].Message,   //将最新的聊天数据放到data中渲染
        });
        console.log("onReady:",snapshot.docs[0].Message);
      },
      onError: function(err) {
        console.error('the watch closed because of error', err)
      }
    });
  },