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{}, ...
随机推荐
- 结合Bootbox将后台JSON数据填充Form表单
本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
- Angular4 JSONP + JAVA代码
一.在app.module.ts模块中,注入JsonpModule模块 import {JsonpModule} from "@angular/http"; @NgModule({ ...
- fiddler响应报文的headers属性详解
fiddler响应报文的headers属性详解 (1)Cache头域 1. Cache-Control 在请求报文已经说过了,用于设置缓存的属性,浏览内容不被缓存. 2. Data 生成消息的具体时间 ...
- python 新手函数基础(函数定义调用值传递等)
1.编程的集中主要方式: 面向过程 >类 >>关键字class 面向函数>函数 >> 关键字def 面向过程> 过程 >> 关键字def 2.py ...
- react--基本用法
1.安装了babel 但是终端执行 babel src --out-dir build命令时说"babel:command is not found" 经百度,找到solution ...
- 日志工具——slf4j
一.概述 简单日记门面(simple logging Facade for java)SLF4J是为各种loging APIs提供一个简单统一的接口,从而使得最终用户能够在部署的时候配置自己希望的lo ...
- 20154327 EXP8 Web基础
基础问题回答 (1)什么是表单? 表单:表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包 ...
- 【SQL】字符串去空格解决方法
一.表中字符串带空格的原因 1,空格就是空格. 2,控制符 显示为 空格. 二.解决方法 第一种情况,去空格的处理的比较简单,Replace(column,' ','') 就可以解决. 第二种情况,解 ...
- day 2 飞机大战原理
1. 程序的图片的坐标 (左上角为顶点) 2.图片变成动态的 3.集成显卡 和独立显卡