better-scroll 是什么

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。

better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,zip 后仅有9kb,是一款非常轻量的 JS lib。

怎么使用 better-scroll

结构

例:常见的列表滚动

以上代码better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。

加载

<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动,大部分情况可能只需要一个简单的滚动
import BetterScroll from 'better-scroll'


let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})


import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})

具体的api 教程:https://gitee.com/mirrors/better-scroll/

切记不可以在render里进行实例化因为在第一次触发render的时候DOM还未生成所以需要在componentDidMount里进行。

很多人已经用过 better-scroll,但是最多的问题是:

better-scroll 初始化了, 但是没法滚动。

不能滚动是现象,我们得搞清楚这其中的根本原因。在这之前,我们先来看一下浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

better-scroll 也是一样的原理,我们可以用一张图更直观的感受一下:

布局

绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。

首先需要给wrapper设置css

.wrapper{ width: 100%; white-space: nowrap; //让子元素超出不换行 padding: 25px 13px; overflow: hidden; }

content元素需要设置动态的width,可以去估算出每个元素的宽度

<ul className="content" style={{ width: `${210 * _flattenDeep(list).length}px` }} ></ul>

在这里我根据数组元素的length来置换ul的总宽度

然后就可以滚动啦!

当然要是需要竖向滚动需要设置在初始化时

componentDidMount() {
    const wrapper = document.querySelector('.wrapper')
    //选中DOM中定义的 .wrapper 进行初始化
    const scroll = new BScroll(wrapper, {
      click: true,  // better-scroll 默认会阻止浏览器的原生 click 事件
      scrollY: true, //关闭竖向滚动
    })
  }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值