如何在uniapp中滚动到底部

滚动到底部是一个很常见的功能，尤其在聊天室、朋友圈等场景下更是必不可少，本文将会从多个方面介绍在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组件、使用第三方插件都可以实现这个功能，可以根据具体的需求选择合适的方法。