betterscroll制作竖屏直播弹幕

查看演示立即下载

插件描述：js滚动插件（应用场景：下拉加载，上拉刷新，抖音直播消息提示）

更新时间：2021-05-01 01:12:18

更新说明：better-scroll-cdn链接出问题，所有js换为本地文件

更新时间：2020-05-05 22:39:33

better-scroll 提供了很多灵活的 API，当我们基于 better-scroll 去实现一些 feature 的时候，会用到这些 API，了解他们会有助于开发更加复杂的需求。

学习使用 better-scroll 最好的方式是看它的 demo 代码，我们把代码都放在了 example 目录。由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。

<div >
 <ul >
   <li>...</li>
   <li>...</li>
   ...
 </ul>
 <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

最简单的初始化代码如下：

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

better-scroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，better-scroll 内部会尝试调用 querySelector 去获取这个 DOM 对象，所以初始化代码也可以是这样：

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com