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{}, ...
随机推荐
- java8的新特性,Collections.sort(排序的List集合)的使用,对list封装Map里面的某个值进行排序
--------------------------对简单list的排序---------------------------------- List<Integer> list = ne ...
- SQL:登录、连接数据库基本操作
使用MySQL 登录.连接数据库 win+R打开控制台,cmd进入控制台,输入mysql -u root -p,后输入密码,进入数据库: 首先可以查看原有的数据库,输入 show databases; ...
- sql 复杂查询 以teacher student course多对多关系为例
数据库表和值 /* SQLyog Ultimate v8.32 MySQL - 5.7.17-log : Database - course_dbms ************************ ...
- 【读书笔记 - Effective Java】02. 遇到多个构造器参数时要考虑用构建器
类有多个可选参数的解决方案: 1. 重叠构造器模式可行,但是当有许多参数的时候,客户端代码会很难编写,并且仍然较难以阅读. 2. JavaBeans模式,调用一个无参构造器来创造对象,然后调用sett ...
- jQuery中的easyui
一,easyui---datagrid绑定数据的简单测试: 1.数据库中的UserInfo表及数据测试: 2.DAL层: //分页,模糊查询(pageNum-1)*pageSize+1----从第几条 ...
- QWT编译与配置-Windows/Linux环境
QWT编译与配置-Windows/Linux环境 QWT和FFTW两种开源组件是常用的工程软件支持组件,QWT可以提供丰富的绘图组件功能,FFTW是优秀数字波形分析软件.本文使用基于LGPL版权协议的 ...
- java语言描述 猴子吃桃问题(递归和循环写法)
//题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个//第二天早上又将剩下的桃子吃掉一半,又多吃了一个//以后每天早上都吃了前一天剩下 的一半零一个.到第10天早上想再 ...
- Docker开篇之HelloWorld
按照程序世界的惯例,我们应该以HelloWorld的程序为起点开始介绍.那么接下来我们就看看Docker的HelloWorld是如何运行的. 安装 Docker CE 由于我的系统是OSX,个人推荐使 ...
- go学习笔记-反射(Reflection)
反射(Reflection) 反射是利用reflect包实现的 反射可大大提高程序的灵活性,使得interface{}有更大的发挥余地 反射使用TypeOf和ValueOf函数从接口中获取目标对象信息 ...
- JavaWeb——库存管理系统(1)jsp部分---18.12.13
add.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...