首先我们需要使用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. JS中的“==”与强制类型转换

    JavaScript中有“==”与“===”,那么他们有何区别呢? 对于基本数据类型, ===  (!==)只有当两个变量的类型和值都相等时,才返回true:而 == (!=)则会对变量进行强制类型转 ...

  2. xtrabackup全量备份+binlog基于时间点恢复

    1.通过xtrabackup的备份恢复数据库. 2.找到start-position和binlog名称 cat xtrabackup_info 3.导出mysqlbinlog为sql文件,并确定恢复的 ...

  3. Git 远程推送被拒绝的一种解决方案

    今天在推送的时候发生了如下错误信息: error: 无法推送一些引用到 'https://gitee.com/von_w/demo_app.git'提示:更新被拒绝,因为您当前分支的最新提交落后于其对 ...

  4. Java并发之线程状态及Thread常用方法

    本篇文章主要讲解线程的虚拟机状态和线程基本方法,希望可以加深对线程的使用理解. 一.线程的虚拟机状态 线程对象在不同的运行期间有不同的状态,状态信息定义在Thread公共静态枚举java.lang.T ...

  5. 10分钟搞定webpack打包

    入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的webpack打包过程拔出来给大家鲁一遍,就算帮助那些小白了,废话不多说,开始鲁起来,大家跟着我一起撸... 首先, ...

  6. python中mysql主从同步配置的方法

    1)安装mysql ubuntu中安装一台mysql了,docker安装另外一台mysql 获取mysql的镜像,主从同步尽量保证多台mysql的版本相同,我的ubuntu中存在的mysql是5.7. ...

  7. 全文检索引擎 sphinx-coreseek中文索引

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索. Sphinx特别为一些 ...

  8. 使用Scala开发Apache Kafka的TOP 20大好用实践

    本文作者是一位软件工程师,他对20位开发人员和数据科学家使用Apache Kafka的方式进行了最大限度得深入研究,最终将生产实践环节需要注意的问题总结为本文所列的20条建议. Apache Kafk ...

  9. centos7下使用n grok编译服务端和客户端穿透内网

    (发现博客园会屏蔽一些标题中的关键词,比如ngrok.内网穿透,原因不知,所以改了标题才能正常访问,) 有时候想在自己电脑.路由器或者树莓派上搭建一些web.vpn等服务让自己用,但是自己的电脑一般没 ...

  10. 找球号(三)南阳acm528(异或' ^ ')

    找球号(三) 时间限制:2000 ms  |  内存限制:10000 KB 难度:2   描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都 ...