首先我们需要使用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. JSON字符串与JS对象格式转换

    JSON通常用于服务器向客户端传送数据,传回来的JSON数据是字符串的形式,所以要转变为JS对象形式才方便我们使用. JSON字符串转变为JS对象:JSON.parse( ); JS对象转变为JSON ...

  2. 虚拟机下linux 系统网卡配置、固定IP地址

    1.进入该目录下修改内容 vi       /etc/sysconfig/network-scripts/  ifcfg-eth0 TYPE=Ethernet BOOTPROTO=static DEF ...

  3. hadoop生态搭建(3节点)-10.spark配置

    # https://www.scala-lang.org/download/2.12.4.html# ================================================= ...

  4. linux驱动动态与静态加载

    在Linux中驱动的加载方式有动态加载和静态加载.动态加载,即驱动不添加到内核中,在内核启动完成后,仅在用到这一驱动时才会进行加载静态加载,驱动编译进内核中,随内核的启动而完成驱动的加载.添加字符驱动 ...

  5. (mark)ubuntu16.04下安装&配置anaconda+tensorflow新手教程

    https://blog.csdn.net/m0_37864814/article/details/82112029

  6. 网易云音乐API

    网易云音乐API使用 封装了一些api调用 ZZRRegion/StNetease

  7. 利用.NET Code Contracts实现运行时验证

    .NET的Contract类库是Declarative Programming实践的一部分,可以对日常编程带来很多好处: 提高代码可读性,使用者一看Require, Ensure就知道这方法接受什么输 ...

  8. [Cracking the Coding Interview] 4.1 Route Between Nodes 节点间的路径

    Given a directed graph, design an algorithm to find out whether there is a route between nodes. 这道题让 ...

  9. USACO16OPEN_248&&USACO16OPEN_262144_KEY

    题目传送门 这道题比较水,设f[i][j]表示i~j区间合并的最大值. #include <cstdio> #define max(a,b) a>b?a:b using namesp ...

  10. 北京Uber优步司机奖励政策(2月28日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...