vue之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中加入如下代码
/* 封装方法:滚动到最底部 */
ScrollToEndFlag () {
if ( scrollToEndFlag ) {
/* this.scroll: 为 better-scroll 的实例 */
this.scroll.scrollTo(0, this.scroll.maxScrollY)
}
}
最后在父组件中使用
<scroll :scrollToEndFlag="true"> </scroll>
vue之Better-Scroll组件 将滚动条滚到最底部的更多相关文章
- Vue 组件内滚动条 滚到到底部
因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: ...
- jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- JS实现判断滚动条滚到页面底部并执行事件的方法
需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- jQuery判断滚动条滚到页面底部脚本
原文地址 http://www.111cn.net/wy/jquery/61741.htm
- vue-gemini-scrollbar(vue组件-自定义滚动条)
vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- 用Vue来实现音乐播放器(10):Scroll组件的抽象和应用
了解better-scroll什么时候是需要refresh计算的??通常我们遇到的better-scroll不能滚动的问题的根源是什么??better-scroll的渲染原理是:根据初始化的时机 或 ...
- VUE移动端音乐APP学习【四】:scroll组件及loading组件开发
scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
随机推荐
- 【LeetCode】54. Spiral Matrix 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 维护四个边界和运动方向 保存已经走过的位置 日期 题 ...
- C. Hongcow Builds A Nation
C. Hongcow Builds A Nation time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- VMware15 虚拟机分别设置连接笔记本的WLAN和以太网双网络
VMware15 虚拟机分别设置连接笔记本的WLAN和以太网双网络 虚拟机:window 10 主机: window 10 VVmware有3种网络连接模式:桥接.NAT.主机模式,默认分别对应VMN ...
- Autofac 依赖注入小知识
Autofac 依赖注入小知识 控制反转/依赖注入 IOC/DI 依赖接口而不依赖于实现,是面向对象的六大设计原则(SOLID)之一.即依赖倒置原则(Dependence Inversion Prin ...
- 实现golang io.Writer支持按照天为单位分割日志
golang中的日志不支持按照天分割,很多开源的日志包都是只支持按照文件大小分割日志,不太利于生产环境中的使用.因此我实现了timewriter,支持: 实现按照天为单位分割日志,可以完美支持gola ...
- 离线版centos8环境部署迁移监控操作笔记
嗨咯,前两天总结记录了离线版centos8下docker的部署笔记,今天正好是2021年的最后一天,今天正好坐在本次出差回家的列车上,车上没有上面事做,索性不如把本次离线版centos8环境安装的其他 ...
- CS5216PIN TO PIN替换PS8402A方案|PS8402A电路设计原理图|CS5216芯片
PS8402A是HDMI 电平移位器/中继器专为2型双模Display Port(DP++)电缆适配器应用而设计.它设计用于Display Port到DVI或Display Port到HDMI的2型适 ...
- 使用子查询获取,使用 all 关键字获取比所有“国内短线游”价格高的线路信息,按照线路类型、线路价格升序显示线路编号、线路名和价格
查看本章节 查看作业目录 需求说明: 使用子查询获取"国内短线游"及"国内长线游"的线路信息,按照线路类型.线路价格升序显示线路编号.线路名和价格 使用 all ...
- VNC的安装和使用
说明 VNC (Virtual Network Console)是虚拟网络控制台的缩写.它是能远程连入Linux进行图形化操作. VNC百度百科介绍:https://baike.baidu.com/i ...
- git 忽略本地文件的修改
项目开发过程中,会遇到本地配置文件每个开发人员不同的情况,但如果遇到类似数据库配置这种最终需要加入 git 版本控制的配置,则会陷入两难境地.要么不跟踪,要么有人提交后其他人同步下来必须手动修改,非常 ...