首先我们需要使用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加载完成后,自动滚动到最底部的更多相关文章

  1. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  2. 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="conver()"> 2.在脚本中用window.onload: <script type=&quo ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  5. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  6. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  7. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. 05JavaScript语句

    1.JavaScript 语句 JavaScript 语句是发给浏览器的命令. 这些命令的作用是告诉浏览器要做的事情. 2.分号 ; 分号用于分隔 JavaScript 语句. 通常我们在每条可执行的 ...

  2. PHP 获取客户端 IP 地址

    先来了解一个变量的含义: $_SERVER['REMOTE_ADDR']:浏览当前页面的用户计算机的ip地址 $_SERVER['HTTP_CLIENT_IP']:客户端的ip $_SERVER['H ...

  3. 「PHP」工厂方法模式

    引言   所属:创建型模式,常用设计模式之一 工厂模式分为:简单工厂模式.工厂方法模式.静态工厂模式.抽象工厂模式. 下面为工厂方法模式. 参考资料: <大话设计模式>程杰   模式概述 ...

  4. 集合之Map

    Map:存放键值对,根据键对象找对应的值对象.键不能重复!Map键不能重复,有唯一性,一般通过键找对应的的值Map集合的特点: 1.具有映射关系 2.两列 3.一列要唯一 一列可以重复 键类似于 Se ...

  5. Python 爬虫 招聘信息并存入数据库

    新学习了selenium,啪一下腾讯招聘 from lxml import etree from selenium import webdriver import pymysql def Geturl ...

  6. C语言调整数组使奇数全部都位于偶数前面

    //输入一个整数数组,实现一个函数,//来调整该数组中数字的顺序使得数组中所有的奇数 位于数组的前半部分,//所有偶数 位于数组的后半部分. #include<stdio.h>#inclu ...

  7. Python3爬虫(十五) 代理

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.设置代理 1.urllib #HTTP代理类型 from urllib.error import URLErr ...

  8. (数据科学学习手札39)RNN与LSTM基础内容详解

    一.简介 循环神经网络(recurrent neural network,RNN),是一类专门用于处理序列数据(时间序列.文本语句.语音等)的神经网络,尤其是可以处理可变长度的序列:在与传统的时间序列 ...

  9. Java——异常处理---18.11.14

    异常时程序中会有一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error: 如果你用 System ...

  10. java入门---基本数据类型之引用数据类型&数据类型转换

        接着上一篇文章来,这次就先看看什么是引用数据类型?首先得满足以下条件: 在Java中,引用类型的变量非常类似于C/C++的指针.引用类型指向一个对象,指向对象的变量是引用变量.这些变量在声明时 ...