首先我们需要使用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. 微信小程序新版用户授权方式处理

    最新更新(2018-12-27): 最近做了改版,做成默认进来就是首页,然后去判断有没有用户信息,没有的话再去判断用没授权过,如果授权过直接自动去获取,没有的话再跳转到授权页面.因为用户授权主要就是针 ...

  2. LeetCode 简单 -二进制求和(105)

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  3. Eclipse切换字体颜色

    打开window-preferences

  4. Java分布式锁之数据库方式实现

    之前的文章<Java分布式锁实现>中列举了分布式锁的3种实现方式,分别是基于数据库实现,基于缓存实现和基于zookeeper实现.三种实现方式各有可取之处,本篇文章就详细讲解一下Java分 ...

  5. 【saltstack 集中化管理】

    Master(监控端): Minion(被监控端) 监控: /etc/master: #interface:监控端地址 #自动接受被监控端证书 #saltstack文件根目录位置 #启动监控 被监控: ...

  6. 【JVM】上帝视角看JVM内存模型,分而治之论各模块详情

    1. 上帝视角 [树看JVM] [图看JVM] 2. 分而治之 2.1 堆区 构成:堆区由新生代和老年代组成,新生代中包含伊甸区(Eden).幸存者区(survivor from .survivor ...

  7. 关于php中数字0与其他变量的相等判断

    在实践过程中,经常需要做`==`判断,有时候会把0当做false一样用,但是0和false在用来做比较的时候还是不一样的, false false==0 等于true false=='0' 等于tru ...

  8. python3 练习题100例 (一)

    断断续续的学了很久的python,有很多又忘记了.从今天开始用实例再进行一次学习,并记录.本人小白一个,请大家多多指教. #!/usr/bin/env python3 # -*- coding: ut ...

  9. HyperLedger Fabric 1.4 kafka生产环境部署(11.1)

    11.1 Kafka模式简介       上一章介绍的Solo模式只存在一个排序(orderer)服务,是一种中心化结构,一旦排序(orderer)服务出现了问题,整个区块链网络将会崩溃,为了能在正式 ...

  10. react--基本用法

    1.安装了babel 但是终端执行 babel src --out-dir build命令时说"babel:command is not found" 经百度,找到solution ...