首先我们需要使用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加载完成后,自动滚动到最底部的更多相关文章

  1. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  2. 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="conver()"> 2.在脚本中用window.onload: <script type=&quo ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  5. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  6. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  7. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. Python-知识点小计

    1.python赋值.浅拷贝.深拷贝区别:https://www.cnblogs.com/xueli/p/4952063.html: 2.python的hasattr(),getattr(),sett ...

  2. day 21继承

    1.了解Python2和python3类的区别:   python2.3之前使用的是经典类, 在2.3版本之后组,使用的是新式类 MRO: method resolution order  方法的查找 ...

  3. spark----词频统计(一)

    利用Linux系统中安装的spark来统计: 1.选择目录,并创建一个存放文本的目录,将要处理的文本保存在该目录下以供查找操作: ① cd /usr/local ②mkdir mycode ③ cd ...

  4. python教程(二)·第一个python程序

    几乎所有的计算机语言教程,不仅仅是python,都以这样一个相似的示例程序开始讲解--Hello World! 代码如下,简简单单的一行.想必稍微了解英语的读者,都能猜到这段代码功能吧. print( ...

  5. Linux 中的权限

    ABCD A-0, 十进制 B-user(u, 用户) C-group(g, 组用户) D-others(o, 其他用户) +-----+---+--------------------------+ ...

  6. go基础语法-常量与枚举

    1.常量定义 用const关键字修饰常量名并赋值,常量命名不同于java等语言,golang中一般用小写,因为在golang中首字母大写表示public权限 const a = 3 2.常量使用 使用 ...

  7. 树形DP(例题)

    没有上司的舞会 题目 Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.每个职员有一个快乐指数.现在有个周年庆宴会,要求与会职 ...

  8. Prism for WPF 搭建一个简单的模块化开发框架 (一个节点)

    原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说   填充数据 ...

  9. CakePHP 查询总结

    返回 $this->Post->buildQuery(); 返回: Array ( [conditions] => [fields] => [joins] => Arra ...

  10. Ceph性能优化

    几个 Ceph 性能优化的新方法和思路(2015 SH Ceph Day 参后感) 一周前,由 Intel 与 Redhat 在10月18日联合举办了 Shanghai Ceph Day.在这次会议上 ...