码迷,mamicode.com
首页 > Web开发 > 详细

vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部

时间:2018-01-03 14:14:25      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:mount   toe   olly   完成后   settime   需要   自动滚动   坐标   参数   

 

首先我们需要使用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中加入如下代码:

setTimeout(() => {
        this._initScroll()
        console.log(this.scroll.maxScrollY)
        if(this.scrollToEndFlag) {
            this.scroll.scrollTo(0,this.scroll.maxScrollY)
        }
}, 100)  

  

最后在父组件中使用

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

  

 

vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部

标签:mount   toe   olly   完成后   settime   需要   自动滚动   坐标   参数   

原文地址:https://www.cnblogs.com/momozjm/p/8183084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!