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{}, ...
随机推荐
- 常见web漏洞
常见的web漏洞——文件上传漏洞 一.文件上传漏洞概述 文件上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力.这种攻击方式是最为直接和有效的,有时候几乎没 ...
- [].slice.call的理解
首先要说明[].slice.call()与Array.prototype.slice.call() 有什么区别? [].slice === Array.prototype.slice true []为 ...
- Scala 语法(一)
(1)基本语法 变量 val var(可变变量): 数据类型 Byte,Char,Int,Short,Long,String(字符),Float,Double,Boolean(true,flase). ...
- python学习笔记:第12天 列表推导式和生成器
目录 1. 迭代器 2. 推导式 1. 迭代器 什么是生成器呢,其实生成器的本质就是迭代器:在python中有3中方式来获取生成器(这里主要介绍前面2种) 通过生成器函数获取 通过各种推导式来实现生成 ...
- ubuntu 杂记
修改/home下中文目录 网易云sudo解决 https://jingyan.baidu.com/article/1e5468f956a15c484861b770.html 字体 https: ...
- 企业SVN版本管理与代码上线方案
1.SVN服务实战 1) 什么是SVN(Subversion)? Svn(subversion)是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Sv ...
- linux mint系统 cinnamon桌面 发大镜功能
让我来告诉迷途中的你cinnamon桌面一个好用的功能. 选择设置 选择窗口 -> 选择行为 看那个窗口移动和调整大小的特殊键 Alt 好了按住alt在滑动滑轮 世界不一样了 对于小屏幕高分辨率 ...
- C# set 跟 get
可以在类里面 private string name; public string Name { get { return name; } set { name = value; } }
- 利用主成分分析(PCA)简化数据
一.PCA基础 线性映射(或线性变换),简单的来说就是将高维空间数据投影到低维空间上,那么在数据分析上,我们是将数据的主成分(包含信息量大的维度)保留下来,忽略掉对数据描述不重要的成分.即将主成分维度 ...
- vue核心概念
# 1. vuex是什么 github站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 简单来说: 对应用中组 ...