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 无法滚动的分析,直接翻到最后,看问题汇总,希望能帮助你解决. 借用一下人家这个好看的项目图片,做一个解释.左边的内容会跟右边的内容一起关联,点击左边的菜单,右边会 ...
随机推荐
- 配置 ASP.NET Core 请求(Request)处理管道
配置 ASP.NET Core 请求(Request)处理管道 在本节中,我们将讨论使用中间件组件为 asp.net core 应用程序配置请求处理管道. 作为应用程序启动的一部分,我们要在Confi ...
- 最简单取得外网IP
#coding=utf-8import urllib2import re print re.search('\d+\.\d+\.\d+\.\d+',urllib2.urlopen("http ...
- python 处理中文遇到的编码问题总结 以及 字符str的编码如何判断
如何处理中午编码的问题 Python的UnicodeDecodeError: 'utf8' codec can't decode byte 0xxx in position 这个错误是因为你代码中的某 ...
- maven工程运行前准备
近一年来,我学习了很多java及数据库前沿技术,如Spring框架,SpringMVC框架,Mybatis框架,Redis,Dubbo,Maven等. 以及一些Linux命令和在Linux环境下的工程 ...
- java基本程序设计结构总结
学习一门语言:(1)掌握它的表现形式(2)这些语言什么应用. 1.1关键字 1.关键字是被赋予了特殊含义的单词. 2.关键字特点:关键字所有字母都小写. 3.类名的每一个单词开头必须大写. 1.2标识 ...
- Spring Boot MVC 使用 JSP 作为模板
Spring Boot 默认使用 Thymeleaf 作为模板引擎,直接在 template 目录中存放 JSP 文件并不能正常访问,需要在 main 目录下新建一个文件夹来存放 JSP 文件,而且需 ...
- js中this关键字的作用
this中的几种情况 1.普通函数中的this window 2.构造函数中的this 是当前构造函数创建的对象在new这个构造函数的时候会在内存中创建一个对象,此时会让this指向刚创建好的这个对象 ...
- springboot测试启动报错java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test
springboot测试启动报错: java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you ne ...
- Rocketmq原理&最佳实践
MQ背景&选型 消息队列作为高并发系统的核心组件之一,能够帮助业务系统解构提升开发效率和系统稳定性.主要具有以下优势: 削峰填谷(主要解决瞬时写压力大于应用服务能力导致消息丢失.系统奔溃等问题 ...
- 每天一套题打卡|河南省第九届ACM/ICPC
A 表达式求值 表达式求值:可以用递归求解,也可以用栈模拟,考过多次. 类似题目:NYOJ305,NYOJ35 用栈模拟做法: #include <stdio.h> #include &l ...