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 ...
随机推荐
- 【剑指Offer】数值的整数次方 解题报告(Python)
[剑指Offer]数值的整数次方 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
- A. Toda 2
A. Toda 2 time limit per test 2 seconds memory limit per test 512 megabytes input standard input out ...
- Codeforces 1076G Array Game 题解
目录 题目大意 做法 代码 不想写昨天晚上cf的比赛题目所以来写题解摸摸鱼 题目大意 有一个在长度为\(k\)的正整数序列\(b\)上进行的游戏,一开始一个棋子放在位置\(1\),假如当前棋子的位置为 ...
- POJ 3264:Balanced Lineup(区间最值查询ST表&线段树)
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 75294 Accepted: 344 ...
- Redis 实现了自己的 VM
Redis的VM(虚拟内存)机制就是暂时把不经常访问的数据(冷数据)从内存交换到磁盘中,从而腾出宝贵的内存空间用于其它需要访问的数据(热数据). Redis提高数据库容量的办法有两种: 1.一种是可以 ...
- 「ARC096C」Everything on It
Solution 容斥,钦定 \(i\) 个数 \(\leq 1\) 次. \[Ans=\sum_{i=0}^n (-1)^i\binom{n}{i}F(i) \] 其中 \(F(i)\) 表示有 \ ...
- Variational Inference with Normalizing Flow
目录 概 主要内容 一些合适的可逆变换 代码 Rezende D., Mohamed S. Variational Inference with Normalizing Flow. ICML, 201 ...
- # 中文NER的那些事儿6. NER新范式!你问我答之MRC
就像Transformer带火了"XX is all you need"的论文起名大法,最近也看到了好多"Unified XX Framework for XX" ...
- Two pointer方法
I.何为Two pointer 用两个哨兵指向两个序列,通过利用序列本身的性质减少遍历次数,来更快得解决一些归并问题 基本问题 给定一个正整数递增序列和一个正整数M,求序列中两个不同位置的a,b使得a ...
- MySQL高级查询与编程笔记 • 【第4章 MySQL编程】
全部章节 >>>> 本章目录 4.1 用户自定义变量 4.1.1 用户会话变量 4.1.2 用户会话变量赋值 4.1.3 重置命令结束标记 4.1.4 实践练习 4.2 存 ...