首先我们需要使用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. The All-purpose Zero(hdu5773)

    The All-purpose Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  2. A1. 道路修建 Small(BNUOJ)

    A1. 道路修建 Small Time Limit: 1000ms Memory Limit: 131072KB 64-bit integer IO format: %lld      Java cl ...

  3. Docker 与 K8S学习笔记(六)—— 容器的资源限制

    我们在启动Docker容器时,默认情况下容器所使用的资源是没有限制的,这样就会存在部分特别耗资源的容器会占用大量系统资源,从而导致其他容器甚至整个服务器性能降低,为此,Docker提供了一系列参数方便 ...

  4. DFT, DHT, DCT, DST

    目录 基本 酉变换 others Fourier-related Transforms DFT DHT DCT 与DFT的联系 DST 与DFT的联系 Gonzalez R. C. and Woods ...

  5. Capstone CS5265替代LT8711龙迅|Typec转HDMI4K60HZ投屏转换方案

    LT8711是一款高性能C型/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接至HDMI2.0接收器.LT8711集成了兼容DP1.2的接收机和兼容HDMI2.0的发射 ...

  6. CS5218DP转HDMI转接方案|CS5218说明|CS5218

    Capstone CS5218是一款单端口HDMI/DVI电平移位器/中继器,具有重新定时功能.它支持交流和直流耦合信号高达3.0-Gbps的操作与可编程均衡和抖动清洗.它包括2路双模DP电缆适配器寄 ...

  7. 4.1.4 统计“锦途网”旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量

    查看本章节 查看作业目录 需求说明: 统计"锦途网"旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量 在 MySQL ...

  8. 【03】SpringBoot2核心技术-核心功能—数据访问_单元测试_指标监控

    3.数据访问(SQL) 3.1 数据库连接池的自动配置-HikariDataSource 1.导入JDBC场景 <dependency> <groupId>org.spring ...

  9. 使用 Docker 部署 Seata Server(分布式事务解决方式)

    1.获取镜像 ## 使用下面命令获取最新版本的镜像,此时我的版本是1.3.0 ## 或者可以使用docker pull seataio/seata-server:latest获取最新的镜像 docke ...

  10. mongodb用户权限管理的CRUD

    https://blog.csdn.net/weixin_34332905/article/details/88759759?utm_medium=distribute.pc_relevant.non ...