BScroll使用
当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
话说前面:
要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
1.下载 npm install better-scroll --save 2.使用: 需要先导入
import BScroll from 'better-scroll'
绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。(官方的图有个错别字,wrapper)
// 1.创建BScroll对象
const bscroll = new BScroll(document.querySelector('.wrapper'),{
probeType:3, //0,1,2,3
click:true, //是否允许点击,默认false
pullUpLoad:true //上拉加载更多,默认为false,不允许
})
默认情况下BScroll是不可以实时的监听滚动位置的
probe 侦测
0,1 都是不侦测
2:在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测
3:只要是滚动,都侦测
关于pullUpLoad的基本使用 bscroll.on('pullingUp',() => {
console.log('上拉加载更多')
// 发送网络请求,请求更多页的数据 // 等数据请求完成,并且将新的数据展示出来后
setTimeout(() => {
bscroll.finishPullUp()
},)
})
实际应用时, 还是要封装
better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对,或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。
https://zhuanlan.zhihu.com/p/27407024知乎原贴
BScroll使用的更多相关文章
- 每日技术总结:filter(),Bscroll
前言: 这是一个vue的电商项目,使用express后端提供数据. 1.filter()函数. 事情是这样的.我从数据库拿到了所有分类数据. 分类有三个等级.父类,子类,孙类这样.但它们都在同一张表里 ...
- 解决[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
在开发项目过程中,使用better-scroll插件中遇到了滚动一次重复提示相同错误 [BScroll warn]: Can not resolve the wrapper DOM. Vue bett ...
- 项目vue2.0仿外卖APP(六)
goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
- jquery满屏滚动代码
//获取显示器宽度 .高度 $screenW = document.body.clientWidth; $screenH = ; $BTimer = ; // 时间周期 $liSize = $(&qu ...
- 用vuejs仿网易云音乐(实现听歌以及搜索功能)
前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...
- vue.js移动端app实战2:首页
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- better-scroll 实现tab栏目滑动当前高亮始终在可视区
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll better-scroll文档地址 如图 ,是我们要实现的 ...
- better-scroll不能滚动之 滚动监听-左右联动
滚动监听 better-scroll 无法滚动的分析,直接翻到最后,看问题汇总,希望能帮助你解决. 借用一下人家这个好看的项目图片,做一个解释.左边的内容会跟右边的内容一起关联,点击左边的菜单,右边会 ...
随机推荐
- .NET Core跨平台部署于Docker(Centos)- 视频教程
(双击全屏播放) 往期教程: .NET开发框架(一)-框架介绍与视频演示 .NET开发框架(二)-框架功能简述 .NET开发框架(三)-高可用服务器端设计 .NET开发框架(四)-服务器IIS实践教程 ...
- CTF必备技能丨Linux Pwn入门教程——ShellCode
这是一套Linux Pwn入门教程系列,作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的一些题目和文章整理出一份相对完整的Linux Pwn教程. 课程回顾>> Linu ...
- (转)Unity与3ds Max的单位关系(使用FBX文件)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/a1780531/article/deta ...
- [b0012] Hadoop 版hello word mapreduce wordcount 运行(二)
目的: 学习Hadoop mapreduce 开发环境eclipse windows下的搭建 环境: Winows 7 64 eclipse 直接连接hadoop运行的环境已经搭建好,结果输出到ecl ...
- Django 练习班级管理系统二 -- 添加班级数据
在上一篇中(Django 练习班级管理系统一 https://www.cnblogs.com/klvchen/p/11078174.html),使用的是莫泰对话框的方式提交数据,适用于数据量少的操作. ...
- tornado 文件上传
服务端 def post(self, *args, **kwargs): # content_type # filename # body file_data=self.request.files i ...
- PAT 乙级真题 1003 我要通过!题解
1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案 ...
- jmeter压测学习6-HTTP Cookie管理器
前言 web网站的请求大部分都有cookies,jmeter的HTTP Cookie管理器可以很好的管理cookies. 我用的 jmeter5.1 版本,直接加一个HTTP Cookie管理器放到请 ...
- c# 第七节 编程规范,vs中的各种设置
本节内容: 1:编程规范 2:vs中的各种设置 3:一个解决方案多个项目的创建.使用 1:编程规范 需要规范的地方: 1: 2: 2:vs中的各种设置 实现: 3:一个解决方案多个项目的创建.使用
- day4_变量和作用域
全局变量与局部变量: 全局变量: 定义变量时,变量左边没有缩进,就是全局变量,可以被当前py文件的任何地方给引用 局部变量: 有缩进的变量就是局部变量 函数的作用域: def test1(): age ...