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】559. Maximum Depth of N-ary Tree 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...
- hdu 1431 素数回文(暴力打表,埃托色尼筛法)
这题开始想时,感觉给的范围5 <= a < b <= 100,000,000太大,开数组肯定爆内存,而且100000000也不敢循环,不超时你打我,反正我是不敢循环. 这题肯定得打表 ...
- vue 设置请求超时时间处理
Vue.http.post('http://114.214.164.77:2222/crptorgraphy',{msg:JSON.stringify(req)},{emulateJSON:true, ...
- Java练习习题,百钱买百鸡问题,用100文钱买鸡,公鸡5文钱一只,母鸡3文钱一只,小鸡3只1文钱
需求说明: 用100文钱买鸡,公鸡5文钱一只,母鸡3文钱一只,小鸡3只1文钱,要求公鸡.母鸡.小鸡都必须要有,刚好用完100文钱,公鸡.母鸡.小鸡的数量之和也是100. public class te ...
- Ranger知识地图
自己总结的Ranger的学习路线和知识点, 提供给感兴趣的同学入门参考之用. Ranger入门路线 1.准备能够上网的电脑,Eclisp开发环境,Linux服务器等: 2.掌握Hadoop(HDFS/ ...
- docker简单安装
docker的安装官网有很直接的教程,直达链接: Ubuntu:https://docs.docker.com/engine/install/ubuntu/ CentOS:https://docs.d ...
- TypeScript中文教程基础部分上----翻译自TS官方
为什么使用TS? js中每一个值在不同的操作运行中表现出一系列不同的行为,比如说下面这个例子: message.toLowerCase();message(); 逐行看下,第一行调用了message的 ...
- java运算符1
一:算术运算符(+, -, *, /, ++, --, ) 1.+号 :可以做加法运算(加号两边为字符和数字).正数表示 字符串连接符:只要+号两边其中有一边有字符串,输出时加号就充当连接 ...
- linux(CentOS7) 之 MySQL 5.7.30 下载及安装
一.下载 1.百度搜索mysql,进入官网(或直接进入官网https://www.mysql.com) 2.选择 downloads 3.翻到最下面,选择MySQL Community (GPL) D ...
- nginx 配置 ^~ 的用法妙处,403阻断
看看这个 location /css/ { alias D:/我的项目/2-代码/express/src/main/resources/static/css/ ; } 咋一看貌似没有毛病,访问 htt ...