首先我们需要使用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中加入如下代码

  

/* 封装方法:滚动到最底部 */
ScrollToEndFlag () {
if ( scrollToEndFlag ) {
/* this.scroll: 为 better-scroll 的实例 */
this.scroll.scrollTo(0, this.scroll.maxScrollY)
}
}

  

最后在父组件中使用

<scroll :scrollToEndFlag="true"> </scroll>

vue之Better-Scroll组件 将滚动条滚到最底部的更多相关文章

  1. Vue 组件内滚动条 滚到到底部

    因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: ...

  2. jquery如何判断滚动条滚到页面底部并执行事件

    首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  3. JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  4. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

  5. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  6. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  7. 用Vue来实现音乐播放器(10):Scroll组件的抽象和应用

    了解better-scroll什么时候是需要refresh计算的??通常我们遇到的better-scroll不能滚动的问题的根源是什么??better-scroll的渲染原理是:根据初始化的时机  或 ...

  8. VUE移动端音乐APP学习【四】:scroll组件及loading组件开发

    scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...

  9. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

随机推荐

  1. Nginx 的五大应用场景

    一.HTTP服务器 Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,如果一个网站只是静态页面的话,那么就可以通过这种方式来实现部署. 1.在文档根目录Do ...

  2. 【机器学*】k*邻算法-02

    k邻*算法具体应用:2-2约会网站配对 心得体会: 1.对所有特征值进行归一化处理:将特征值单位带来的距离影响消除,使所有特征同权重--然后对不同的特征进行加权2.对于相互独立的特征,可以通过建立(特 ...

  3. Histogram Processing

    目录 HISTOGRAM EQUALIZATION 代码示例 HISTOGRAM MATCHING (SPECIFICATION) 其它 Gonzalez R. C. and Woods R. E. ...

  4. [OpenCV]基于特征匹配的实时平面目标检测算法

    一直想基于传统图像匹配方式做一个融合Demo,也算是对上个阶段学习的一个总结. 由此,便采购了一个摄像头,在此基础上做了实时检测平面目标的特征匹配算法. 代码如下: # coding: utf-8 ' ...

  5. [git]git重连

    使用以下两个命令清理缓存进行ssh清除:$ssh-keygen -f "/home/leoxae/.ssh/known_hosts" -Rxxx.xxx.xxx.xxx(指定IP) ...

  6. IT6516功能兼容芯片|DP转VGA方案|CS5202替代兼容IT6516

    台湾联阳T6516是一种高性能的DP显示端口到VGA转换器方案芯片.IT6516结合DisplayPort接收器和三重DAC,通过转换功能支持DisplayPort输入和VGA输出.内置Display ...

  7. 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  8. Ubuntu安装Rocksdb并调试

    前言 第一次写博客^_^ 系统是全新的Ubuntu20.04,什么都没有,一切从头开始安装 查看gcc和g++版本 sudo apt-get update gcc --version g++ --ve ...

  9. android 报错 net::ERR_CLEARTEXT_NOT_PERMITTED

    这是从27版本后不允许使用http方式来请求 ,需要使用https 解决办法: 加入一个开关即可 android:usesCleartextTraffic="true"

  10. Java 递归 常见24道题目 总结

    1.N个台阶的走法递归[这里设为10个台阶] /** * N个台阶的走法递归 * <p> * 有个楼梯,台阶有10个,每次可以跳上1阶 或者 2阶 ,那么台阶的走法一共有多少种 */ @T ...