首先我们需要使用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. Mod Tree(hdu2815)

    Mod Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  2. 『学了就忘』vim编辑器基础 — 94、vim编辑器介绍

    目录 1.vim编辑器简介 2.vim的工作模式 (1)命令模式 (2)输入模式 (3)最后行模式(末行模式) 1.vim编辑器简介 vim是一个全屏幕纯文本(绘个表格或者插个图片就不要想了)编辑器, ...

  3. TKE用户故事 | 作业帮检索服务基于Fluid的计算存储分离实践

    作者 吕亚霖,2019年加入作业帮,作业帮基础架构-架构研发团队负责人,在作业帮期间主导了云原生架构演进.推动实施容器化改造.服务治理.GO微服务框架.DevOps的落地实践. 张浩然,2019年加入 ...

  4. Codeforces 777C:Alyona and Spreadsheet(预处理)

    During the lesson small girl Alyona works with one famous spreadsheet computer program and learns ho ...

  5. [Elasticsearch] ES聚合场景下部分结果数据未返回问题分析

    背景 在对ES某个筛选字段聚合查询,类似groupBy操作后,发现该字段新增的数据,聚合结果没有展示出来,但是用户在全文检索新增的筛选数据后,又可以查询出来, 针对该问题进行了相关排查. 排查思路 首 ...

  6. (原创)WinForm中莫名其妙的小BUG——RichTextBox自动选择字词问题

    一.前言 使用WinForm很久了,多多少少会遇到一些小BUG. 这些小BUG影响并不严重,而且稍微设置一下就能正常使用,而且微软一直也没有修复这些小BUG. 写本系列文章,是为了记录一下这些无伤大雅 ...

  7. 「算法笔记」CRT 与 exCRT

    一.扩展欧几里得 求解方程 \(ax+by=\gcd(a,b)\). int exgcd(int a,int b,int &x,int &y){ if(!b) return x=1,y ...

  8. 一个老菜鸟的年度回忆 & 智能工厂奋斗的第三年,可能有你值得借鉴的

    岁月蹉跎,寒冬的夜晚仍伏案疾书,见论坛中有诸多大神已经开始了一年的总结,突然安奈不住心中的躁动,也想为这今年的奋斗留下只言片语,没有年初的目标总结,没有未来的展望,就想作为一篇日记记录今年项目精力,为 ...

  9. Dart 2.15 现已发布

    作者 / Michael Thomsen, Dart & Flutter Product Manager, Google 我们已经正式发布了 Dart SDK 的 2.15 版本,该版本新增了 ...

  10. Java初学者作业——编写 Java 程序,在控制台中输入日期,计算该日期是对应年份的第几天。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,在控制台中输入日期,计算该日期是对应年份的第几天. 实现思路: (1)声明变量 year.month和 date,用于存储日期中的年.月.日 ...