vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部
首先我们需要使用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加载完成后,自动滚动到最底部的更多相关文章
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- 页面加载完后自动执行一个方法的js代码
1.在body中用onload: <body onload="conver()"> 2.在脚本中用window.onload: <script type=&quo ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- 关于gitbash一直报:sh: __git_ps1: command not found的解决办法
curl -o ~/.git-prompt.sh https://raw.githubusercontent.com/git/git/master/contrib/completion/git-pro ...
- ajaxSubmit 在ie9或360兼容中,form下是空的
解决办法:在<head>....</head>中加入<meta http-equiv="X-UA-Compatible" content=" ...
- 【tp5.1】通过PHPExcel实现导入excel表格
1.上github下载PHPExcel,链接:https://github.com/PHPOffice/PHPExcel 2.下载解压后,将Classes改名为PHPExcel如图 3.将文件夹复制到 ...
- 大数据学习--day03(运算符、流程控制语句)
运算符.流程控制语句 自增自减容易出错的地方: 扩展的赋值运算符 a+=b 等同于 a = a+b; 扩展的赋值运算符 隐含了一个类型的强制转换 & && 有何区别 & ...
- 月薪30-50K的大数据工程师们,他们背后是如何学习的
这两天小编去了解了下大数据开发相关职位的薪资,主要有hadoop工程师,数据挖掘工程师.大数据算法工程师等,从平均薪资来看,目前大数据相关岗位的月薪均在2万以上,随着项目经验的增长工资会越来越高. ...
- WIN10远程连接winserver2012 r2,连接失败
背景:2012开启远程的时候,默认是勾选“仅允许运行使用网络级别身份验证的远程桌面的计算机连接”,这个选项据说比较安全,但是用win10远程的时候就报错,函数不受支持,最后通过修改win10的配置得以 ...
- 【C】关键字void的用法
void有两种功能 [1]没有 [2]任意类型 void出现的位置不同会有不同的解释 [1]void func( void ) func左边的void,代表『没有返回值』 func右边的括弧里的voi ...
- linux3.4.2之DMA驱动完整程序
/* *参考arch/arm/mach-s3c24xx/dma-s3c2410.c */ #include <linux/module.h> #include <linux/kern ...
- Batch Normalization 批量标准化
本篇博文转自:https://www.cnblogs.com/guoyaohua/p/8724433.html Batch Normalization作为最近一年来DL的重要成果,已经广泛被证明其有效 ...
- uCrop 源码剖析
GitHub: uCrop, 版本为 2.2.2 主要是探究一下内部对于图片按比例的裁剪以及压缩, 应该会更很长一段时间 疑惑点 这里记下一些源码分析过程中遇到的疑惑点 sample/src/main ...