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 ...
随机推荐
- Linux学习笔记-韩顺平
这是我学习哔哩哔哩UP主韩顺平的2021韩顺平图解Linux课程的学习笔记. 课程地址:2021韩顺平图解Linux课程 Linux基础篇-Linux目录结构 基本介绍 linux 的文件系统是采用级 ...
- CS5266替代AG9311设计TYPEC转HDMI带PD3.0音视频拓展坞方案
CS5266替代AG9311设计TYPEC转HDMI带PD3.0音视频拓展坞方案台湾安格AG9311是一款TYPEC转HDMI带PD3.0的音视频转换芯片,它主要用在USB TYPEC拓展坞或者USB ...
- <数据结构>图的最小生成树
目录 最小生成树问题 Prim算法:点贪心 基本思想:类Dijstra 伪代码 代码实现 复杂度分析:O(VlogV + E) kruskal算法:边贪心 基本思想: 充分利用MST性质 伪代码 代码 ...
- 编写Java程序,实现字符串统计和处理
返回本章节 返回作业目录 需求说明: 在控制台输入纯字符的字符串,输出当前字符串的长度. 统计出该字符串中出现相同字母次数最多的字母(不考虑不同字母出现次数相同的情况). 将出现最多次数的字母字母替换 ...
- 基于MCRA-OMLSA的语音降噪(三):实现(续)
上篇文章(基于MCRA-OMLSA的语音降噪(二):实现)讲了基于MCRA-OMLSA的语音降噪的软件实现.本篇继续讲,主要讲C语言下怎么对数学库里的求平方根(sqrt()).求自然指数(exp()) ...
- 使用 Docker 构建和运行自己的镜像
步骤 首先,从 GitHub 中克隆示例项目: git clone https://github.com/dockersamples/node-bulletin-board cd node-bulle ...
- 初识python:tkinter 实现 弹球小游戏(非面相对象)
通过 tkinter 采用非面相对象式实现弹球小游戏(使用蹩脚式面相对象实现). #!/user/bin env python # author:Simple-Sir # time:2020/8/3 ...
- python 中的省略号
在查看django源码时遇到下列内容:sweat: 这个省略号是什么意思? 来自为知笔记(Wiz)
- JMeter_调试取样器(Debug Sampler)
大家在调试 JMeter 脚本时有没有如下几种需求: 我想知道参数化的变量取值是否正确! 我想知道正则表达式提取器(或json提取器)提取的值是否正确! 我想知道 JMeter 属性! 调试时服务器返 ...
- centOS8安装java14
一.去官网下载相应的linux版本 二.通过xftp把下载下的文件传输到linux下指定目录 三.使用命令 rpm -ivh 安装(tar.gz 使用 tar zxvf 命令) 四.配置环境变量 ...