当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

话说前面:

    要注意的是,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使用的更多相关文章

  1. 每日技术总结:filter(),Bscroll

    前言: 这是一个vue的电商项目,使用express后端提供数据. 1.filter()函数. 事情是这样的.我从数据库拿到了所有分类数据. 分类有三个等级.父类,子类,孙类这样.但它们都在同一张表里 ...

  2. 解决[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll

    在开发项目过程中,使用better-scroll插件中遇到了滚动一次重复提示相同错误 [BScroll warn]: Can not resolve the wrapper DOM. Vue bett ...

  3. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  4. jquery满屏滚动代码

    //获取显示器宽度 .高度 $screenW = document.body.clientWidth; $screenH = ; $BTimer = ; // 时间周期 $liSize = $(&qu ...

  5. 用vuejs仿网易云音乐(实现听歌以及搜索功能)

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...

  6. vue.js移动端app实战2:首页

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...

  7. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  8. better-scroll 实现tab栏目滑动当前高亮始终在可视区

    https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll better-scroll文档地址 如图 ,是我们要实现的 ...

  9. better-scroll不能滚动之 滚动监听-左右联动

    滚动监听 better-scroll 无法滚动的分析,直接翻到最后,看问题汇总,希望能帮助你解决. 借用一下人家这个好看的项目图片,做一个解释.左边的内容会跟右边的内容一起关联,点击左边的菜单,右边会 ...

随机推荐

  1. 配置 ASP.NET Core 请求(Request)处理管道

    配置 ASP.NET Core 请求(Request)处理管道 在本节中,我们将讨论使用中间件组件为 asp.net core 应用程序配置请求处理管道. 作为应用程序启动的一部分,我们要在Confi ...

  2. 最简单取得外网IP

    #coding=utf-8import urllib2import re print re.search('\d+\.\d+\.\d+\.\d+',urllib2.urlopen("http ...

  3. python 处理中文遇到的编码问题总结 以及 字符str的编码如何判断

    如何处理中午编码的问题 Python的UnicodeDecodeError: 'utf8' codec can't decode byte 0xxx in position 这个错误是因为你代码中的某 ...

  4. maven工程运行前准备

    近一年来,我学习了很多java及数据库前沿技术,如Spring框架,SpringMVC框架,Mybatis框架,Redis,Dubbo,Maven等. 以及一些Linux命令和在Linux环境下的工程 ...

  5. java基本程序设计结构总结

    学习一门语言:(1)掌握它的表现形式(2)这些语言什么应用. 1.1关键字 1.关键字是被赋予了特殊含义的单词. 2.关键字特点:关键字所有字母都小写. 3.类名的每一个单词开头必须大写. 1.2标识 ...

  6. Spring Boot MVC 使用 JSP 作为模板

    Spring Boot 默认使用 Thymeleaf 作为模板引擎,直接在 template 目录中存放 JSP 文件并不能正常访问,需要在 main 目录下新建一个文件夹来存放 JSP 文件,而且需 ...

  7. js中this关键字的作用

    this中的几种情况 1.普通函数中的this window 2.构造函数中的this 是当前构造函数创建的对象在new这个构造函数的时候会在内存中创建一个对象,此时会让this指向刚创建好的这个对象 ...

  8. 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 ...

  9. Rocketmq原理&最佳实践

    MQ背景&选型 消息队列作为高并发系统的核心组件之一,能够帮助业务系统解构提升开发效率和系统稳定性.主要具有以下优势: 削峰填谷(主要解决瞬时写压力大于应用服务能力导致消息丢失.系统奔溃等问题 ...

  10. 每天一套题打卡|河南省第九届ACM/ICPC

    A 表达式求值 表达式求值:可以用递归求解,也可以用栈模拟,考过多次. 类似题目:NYOJ305,NYOJ35 用栈模拟做法: #include <stdio.h> #include &l ...