作者：醉后余欢0醒后亦欢 | 来源：互联网 | 2023-09-17 14:55
文章目录一、安装1.1直接引入bscroll.js文件1.2npm安装二、使用一、安装1.1直接引入bscroll.js文件蓝奏云下载：bscroll.js1.
文章目录
- 一、安装
- 1.1 直接引入 &＃96;bscroll.js&＃96; 文件
- 1.2 npm 安装
- 二、使用
一、安装
1.1 直接引入 bscroll.js 文件
蓝奏云下载&＃xff1a;bscroll.js
1.2 npm 安装
cnpm install better-scroll --save
二、使用
使用 better-scroll 需要有一个根标签&＃xff0c;并且这个根标签下只能有一个标签
然后&＃xff1a;需要把根元素挂载到Bscroll对象的 第一个参数上&＃xff0c;第二个是对象&＃xff0c;可省略
以下 class名为wrapper的元素为根标签。
<style>.wrapper {height: 200px;background-color: teal;overflow: hidden;}
style><body><div class&＃61;"wrapper" ref&＃61;"reference"><ul><button class&＃61;&＃39;btn&＃39;>按钮button><li>列表数据1li><li>列表数据2li><li>列表数据3li><li>列表数据4li><li>列表数据5li><li>列表数据6li><li>列表数据7li><li>列表数据8li><li>列表数据9li><li>列表数据10li><li>列表数据11li><li>列表数据12li><li>列表数据13li><li>列表数据14li><li>列表数据15li><li>列表数据16li><li>列表数据17li><li>列表数据18li><li>列表数据19li><li>列表数据20li>ul>div>body>
<script src&＃61;"./bscroll.js"></script>const bscroll &＃61; new BScroll(document.querySelector(&＃39;.wrapper&＃39;), {probeType: 3,click:false, pullUpLoad: true
})
标准使用格式:
<div id&＃61;"wrapper"><div class&＃61;"content">...这个位置随意<h2>这里边随意h2><h2>这里边随意h2>这个位置也随意...div>
div>
<script>const bscroll &＃61; new BScroll(document.querySelector(&＃39;.wrapper&＃39;), {probeType: 3,})
script>
const bscroll &＃61; new BScroll(document.querySelector(&＃39;.wrapper&＃39;), {probeType: 3,click:false, pullUpLoad: true})bscroll.on(&＃39;scroll&＃39;, (postion) &＃61;> {})bscroll.on(&＃39;pullingUp&＃39;, () &＃61;> {console.log(&＃39;加载&＃39;);bscroll.finishPullUp()})
京公网安备 11010802041100号