1.使用scroll-view   添加 scroll-y="true"  scroll-top="{{scrollTop}}"  

wxml页面

<scroll-view scroll-y="true" class="message-list" scroll-top="{{scrollTop}}">

</scroll-view>

css页面  设置高度
.message-list {
  max-height: 76vh;
}

js页面

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    scrollTop: 0,
  
  },
  
  //自动滚动
  autoScroll() {
    wx.createSelectorQuery().select('.message-list').boundingClientRect(res => {
        this.setData({
            scrollTop: res.height * 100 // 乘以100是为了确保效果明显,实际高度可能需要调整
        });
    }).exec();
},

 //在js页面,在需要的地方获取到数据之后执行
 //自动滚动 // 每次文本变更时调用,重定位到底部
 this.autoScroll(); // 调用自动滚动到底部的函数
  
})

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐