微信小程序:scroll-view自动滚动到最底部,附view标签滚动到底部方法

web前端之微信小程序 专栏收录该内容
7 篇文章 0 订阅

简介

小程序某项目中有个需求:用户进入聊天页,自动到最底部,发送(接收)新消息也到最底部。
由于本身是小程序,且有支持的方法了,所以没有采用计算内容的高度,通过设置 scroll-top 的值,达到效果的方法(代码 冗余没必要)。
小程序API中有scroll-view标签组件,该组件有个方法:scroll-into-view(值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素),即可快速实现需求效果。
在这里插入图片描述

具体实现

1、设置哪个方向可滚动,则在哪个方向滚动到该元素(即滚动到指定元素底部的位置)。所以设置Y轴滚动,并且遍历数据的时候给每条数据添加一个id,设置scroll-into-view的值为最后一条数据的id就可以。如下图:
在这里插入图片描述
2、至于这个id(循环的标签处,此处即view)可以利用好索引,它最后一条数据的id就是所有数据的length-1了。如下图:
在这里插入图片描述
3、页面进入时滚动到底部,给在data中定义的变量赋值,循环数组的最后一个下标值(注意:scroll-into-view的值应为子元素id【id不能以数字开头】)。currentMessageList为存储会话列表数据的数组。
在这里插入图片描述
4、接收消息的滚动到底部时,亦是如此。新的数据返回处理后,重新赋值给currentMessageList,然后重复第三步的红色框的代码。

this.setData({
   toView: `item${this.data.currentMessageList.length - 1}`
 });

5、注意:必须设置固定高度,自动滚动才会生效。

补充

如果以上方法使用了没有自动到底部的效果,那就换一种方式【主要是scrollView的滚动,涉及到的细节问题多一些,以防大家不知道没效果的原因】,直接使用view标签,通过JS方法控制滚动到底部,如下。
第一步: wxml中,使用一个大的view标签包住消息列表代码,设置一个id,自己取名(使用ID是以防后续其他的标签命名有重复)。
在这里插入图片描述
第二步: 在js文件中,data里设置一个 scrollTop: 0 的初始变量。

dataa() {
  scrollTop: 0 // 内容底部与顶部的距离
}

第三步:写一个js方法,如下(注意id名要一致)

toViewBottomFun: function() {
    // 设置屏幕自动滚动到最后一条消息处
    let that = this;
    wx.createSelectorQuery().select('#viewCommunicationBody').boundingClientRect(function(rect) {
      wx.pageScrollTo({
        scrollTop: rect.height,
        duration: 100 // 滑动速度
      })
      that.setData({
        scrollTop: rect.height - that.data.scrollTop
      });
    }).exec();
  }

第四步:在数据处理且赋值完成后,要实现自动滚动到底部效果时,直接调用该方法即可。

最后

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

  • 16
    点赞
  • 8
    评论
  • 20
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值