全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

如何在uniapp中滚动到底部

发布时间:2023-11-24 05:38:06
发布人:xqq

滚动到底部是一个很常见的功能,尤其在聊天室、朋友圈等场景下更是必不可少,本文将会从多个方面介绍在uniapp中实现滚动到底部的方法。

一、使用scroll-view组件

scroll-view组件是uniapp中滚动相关的组件之一,最简单的实现方法是设置scroll-view的scroll-top属性为scroll-view的内容高度减去scroll-view的高度。因此,在浏览器中,可以使用以下代码实现滚动到底部:


scrollToBottom() {
  uni.$emit('scroll-to-bottom');
  var height = uni.getSystemInfoSync().windowHeight;
  var query = uni.createSelectorQuery();
  query.select('#scroll-view').boundingClientRect();
  query.exec((res) => {
    uni.pageScrollTo({
      scrollTop: res[0].height - height
    });
  });
}

在页面中,需要先将scroll-view组件的id设置为“scroll-view”,并在页面的生命周期函数里监听scroll-to-bottom事件:


onLoad() {
  uni.$on('scroll-to-bottom', this.scrollToBottom);
}

当scroll-to-bottom事件被触发时,则会执行scrollToBottom方法,将scroll-view滚动到底部。

二、监听window的scroll事件

除了使用scroll-view组件外,还可以通过监听window的scroll事件实现滚动到底部。最简单的方法是使用JavaScript中的scrollTop属性,其可以获取或设置一个元素的滚动条垂直位置。因此,在浏览器中,可以使用以下代码实现滚动到底部:


scrollToBottom() {
  uni.$emit('scroll-to-bottom');
  var height = document.documentElement.scrollHeight || document.body.scrollHeight;
  window.scrollTo(0, height);
}

这里的方法是在window对象上调用scrollTo方法,将页面滚动到底部。同样,需要在页面的生命周期函数里监听scroll-to-bottom事件:


onLoad() {
  uni.$on('scroll-to-bottom', this.scrollToBottom);
},

三、使用better-scroll组件

Better-scroll组件是一款基于iscroll的滚动解决方案,支持各种各样的滚动场景,比如:饿了么菜单滚动,京东商品列表滚动等。而且,better-scroll组件也是uniapp社区中广泛使用的滚动解决方案,显著提高了滚动的性能。

可以在uniapp页面中使用以下代码实现scroll-view滚动到底部:


new BScroll('#scroll-view', {
  probeType: 3,
  useTransition:false,
  click:true,
  mouseWheel:true,
  tap:true,
  pullUpLoad:{threshold:50}
}).on('scroll', () => {
  const distance = this.scroll.y + this.wrapperHeight - this.scrollerHeight;
  if (distance === 0) {
    uni.$emit('scroll-to-bottom');
  }
});

这里的代码是在better-scroll组件上监听scroll事件,当滚动到底部时,会触发scroll-to-bottom事件,并执行scrollToBottom方法,将scroll-view滚动到底部。

四、使用第三方插件

除了自己编写代码实现滚动到底部,还可以使用第三方插件。比如,可以使用vue-infinite-loading插件,其无限滚动组件提供了自动判断滚动到底部的功能。

可以在uniapp页面中使用以下代码实现滚动到底部:





在以上代码中,可以监听vue-infinite-loading组件的infinite事件,当滚动到底部时,则会执行infiniteHandler方法,并且可以执行scrollToBottom方法,将scroll-view滚动到底部。

五、小结

以上就是几种在uniapp中实现滚动到底部的方法。scroll-view组件、监听window的scroll事件、使用better-scroll组件、使用第三方插件都可以实现这个功能,可以根据具体的需求选择合适的方法。

uniapp滚动到底部

相关文章

JexlEngine介绍及应用

JexlEngine介绍及应用

2023-11-24
linuxtcp最大长度,linux设置tcp最大连接数

linuxtcp最大长度,linux设置tcp最大连接数

2023-11-24
如何修改iframe里面的样式

如何修改iframe里面的样式

2023-11-24
Access_token已过期

Access_token已过期

2023-11-24

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取