vue之Better-Scroll组件 将滚动条滚到最底部

Posted 2022-04-18 jingxuan-li

首先我们需要使用scrollTo这个方法：

scrollTo(x, y, time, easing)

参数：

• Number x 横轴坐标（单位 px）
• Number y 纵轴坐标（单位 px）
• Number time 滚动动画执行的时长（单位 ms）
• Object easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

为了组件的复用性，我们需要在scroll组件的props添加一个flag，可以监听父元素是否开启滚动到最底部。

// 控制开关
scrollToEndFlag: 
    type: Boolean,
    default: false
 

　　

接下来我们在scroll组件的mounted中加入如下代码

　　

/* 封装方法：滚动到最底部 */
ScrollToEndFlag () 
  if ( scrollToEndFlag ) 
    /* this.scroll: 为 better-scroll 的实例 */
    this.scroll.scrollTo(0, this.scroll.maxScrollY)
  

　　

最后在父组件中使用

<scroll :scrollToEndFlag="true"> </scroll>