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{}, ...
随机推荐
- chromium之message_pump_win之二
接下来分析 MessagePumpForUI上一篇分析MessagePumpWin,可以参考chromium之message_pump_win之一 根据对MessagePumpWin的分析,Messa ...
- excel批量转换为CSV格式,xls批量导出csv格式
工具/原料 excel 2013 地址链接:http://pan.baidu.com/s/1c1ZABlu 密码:d3rc 方法/步骤 首选我们把需要导出为CVS的Excel文件整理集中到 ...
- 启动pip时,< Fatal error in launcher: Unable to create process using '"' >问题的原因及解决方法
根本原因 要启动的pip程序,中指定的python程序路径不对 实例分析 我的window电脑上同时安装了python2.7和python3.6,他们的安装路径如下图: 注意图python2.7中红线 ...
- 解决thinkphp query()执行原生SQL语句成功结果报错的问题
1.query方法 query方法用于执行SQL查询操作,如果数据非法或者查询错误则返回false,否则返回查询结果数据集(同select方法). 2.execute方法 execute用于更新和写入 ...
- try catch finally 中 returne的执行顺序
结论:1.不管有没有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...
- H5测试(转载)
可能有些朋友不明白啥是H5,但其实生活中我们经常会碰到. 比如,你经常收到的朋友虐狗第一式—结婚请贴. 你的朋友圈,可能会经常看到宝妈们虐狗第二式—晒可爱宝宝的相册. 你有可能也收到过这样,非常直观, ...
- [OpenCV][关于OpenCV3.2.0+VS2015+Win10环境搭建]
在VS2015上搭建OpenCV3.2.0+Win10 1.OpenCV3.2.0在VS2015上的配置 1).下载.解压OPENCV 登陆OpenCV官方网站下载相应版本的OpenCV-SDK 这里 ...
- 从零开始一个http服务器(二)-请求request解析
从零开始一个http服务器 (二) 代码地址 : https://github.com/flamedancer/cserver git checkout step2 解析http request 观察 ...
- 常用数字信号的产生(C实现)-均匀分布&正态分布
小白博主开始学DSP之路,为了激励自己能坚持下去,写一系列博客来记录下来,也欢迎与大家一起讨论.介于我能力所限,这里学习目标定为,学习一个基础知识,写一个C语言程序实现, 最后会形成一个C的函数库,方 ...
- RESTful Demo
Demo 功能 两个模块, App 与 Admin, App 模块提供增加用户(/add?name=${name})与查询用户(/query/${id}), Admin 模块提供列出所有用户(/lis ...