编程大白话之-better-scroll移动端区域滚动插件
2019-07-28 本文已影响0人
Han涛_
今天有一个朋友问我，他使用better-scroll后结果没有动的问题，那么和大家聊一下我口中的better-scroll移动端的滚动插件。
引用网站的一句话：
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
网站有给出的具体解释及介绍：http://ustbhuangyi.github.io/better-scroll/doc/options.html
网站上有很清楚的描述，而且这个插件就像它所描述的是一个轻量级的很好使用和操作，遇到的问题大多是html或一些小细节，下面我来出几个简单的例子大家看看就OK了！
X轴横向滚动
Hantao.gif
<body>
<!-- 横向滑动 -->
<!-- 包裹容器 -->
<div class="menu-wrap">
<!-- 滑块 -->
<div>
<div class="content-nav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
<span>菜单7</span>
<span>菜单8</span>
<span>菜单9</span>
<span>菜单10</span>
</div>
</div>
</div>
<script src="./js/bscroll.min.js"></script>
<script>
// 页面(DOM)加载完成后执行
window.onload = function () {
// 实例化
var bScroll = new BScroll('.menu-wrap', {
scrollX: true // X轴移动
})
}
</script>
</body>
CSS样式写了两种：第一种使用定位
@function px2rem($px, $rem: 75) {
@return $px / $rem * 1rem;
} // 引用的flexible文件，设置尺寸使用的
.menu-wrap {
position: relative; // 外层最大的盒子
height: px2rem(80);
line-height: px2rem(80);
>div {
position: absolute; // 可移动的盒子
.content-nav { // 内容盒子
display: flex;
span {
width: px2rem(100);
margin: 0 px2rem(20);
text-align: center;
}
}
}
}
第二种：使用宽度(宽度为已知的宽度，设置后变为死值，所以没有上面的方法灵活，效果一样)
@function px2rem($px, $rem: 75) {
@return $px / $rem * 1rem;
} // 引用的flexible文件，设置尺寸使用的
.menu-wrap {
width: 100%;
height: px2rem(80);
line-height: px2rem(80);
>div {
width: 200%; // 中间移动的盒子设置宽度
overflow: hidden; // 配合overflow:hidden
.content-nav {
display: flex;
span {
width: px2rem(100);
margin: 0 px2rem(20);
text-align: center;
}
}
}
}
只要在html中创建的盒子嵌套没有问题，引入better-scroll文件后设置scrollX: true，就可以移动了。
Y轴纵向移动
Hantao.gif
<body>
<!-- 纵向滑动 -->
<!-- 包裹容器 -->
<section class="wrap">
<!-- 滑动模块 -->
<div>
<!-- 内容区域 -->
<div>列表1</div>
<div>列表2</div>
<div>列表3</div>
<div>列表4</div>
<div>列表5</div>
<div>列表6</div>
<div>列表7</div>
<div>列表8</div>
<div>列表9</div>
<div>列表10</div>
<div>列表11</div>
<div>列表12</div>
<div>列表13</div>
<div>列表14</div>
<div>列表15</div>
<div>列表16</div>
<div>列表17</div>
<div>列表18</div>
<div>列表19</div>
<div>列表20</div>
<div>列表21</div>
<div>列表22</div>
<div>列表23</div>
<div>列表24</div>
<div>列表25</div>
<div>列表26</div>
<div>列表27</div>
<div>列表28</div>
<div>列表29</div>
<div>列表30</div>
<div>列表31</div>
<div>列表32</div>
<div>列表33</div>
<div>列表34</div>
<div>列表35</div>
<div>列表36</div>
<div>列表37</div>
<div>列表38</div>
<div>列表39</div>
<div>列表40</div>
<div>列表41</div>
<div>列表42</div>
<div>列表43</div>
<div>列表44</div>
<div>列表45</div>
<div>列表46</div>
<div>列表47</div>
<div>列表48</div>
<div>列表49</div>
<div>列表50</div>
</div>
</section>
<script src="./js/bscroll.min.js"></script>
<script>
// 页面(DOM)加载完成后执行
window.onload = function() {
// 实例化
var bScroll = new BScroll('.wrap', {
scrollY: true // Y轴移动
})
}
</script>
</body>
html,
body {
height: 100%;
}
// 包裹盒子
.wrap {
height: 100%; // 父元素高度要为100%
overflow: hidden; // 加上后滚动条消失
// 滑动模块
>div {
// 以防内容太少，导致滚动失败，可以通过js获取父元素高度+1px
min-height: 100.1%;
}
}
Y轴移动时只要有高度，并且内容超出了最外层盒子时，设置scrollY: true就可以移动。要注意查看设置滑动盒子的高度，是否正确，如果有多层盒子，要一级级的向下设置。
有这个效果之后，我们可以通过这个延伸制作上拉刷新下拉加载
Hantao.gif
<body>
<div class="app">
<header></header>
<section>
<div class="wrap">
<div>
<!-- 必须要有一个内容盒子，用来存放内容 -->
<ul id="uls">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
<li>列表41</li>
<li>列表42</li>
<li>列表43</li>
<li>列表44</li>
<li>列表45</li>
<li>列表46</li>
<li>列表47</li>
<li>列表48</li>
<li>列表49</li>
<li>列表50</li>
</ul>
</div>
</div>
</section>
<footer></footer>
</div>
</body>
<script src="./js/bscroll.min.js"></script>
<script>
window.onload = function () {
var bScroll = new BScroll('.wrap', {
scrollY: true,
probeType: 3, // 监听滚动事件，配合scroll事件使用
pullDownRefresh: { // 下拉刷新，配合pullingDown事件使用
threshold: 50, // 下拉触发的高度
stop: 0 // 刷新后返回的高度，不设会停在40px位置
},
pullUpLoad: { // 上拉加载，配合pullingUp事件使用
threshold: -30, // 设置上拉触发事件的距离
}
});
bScroll.on('pullingDown', function() { // 配合pullDownRefresh使用
console.log('下拉刷新')
var li = document.createElement('li'); // 刷新添加一个新的li
li.innerText = '我是新来的li';
uls.insertBefore(li, uls.children[0]);
bScroll.finishPullDown(); // 完成下拉，配合下拉刷新使用，如果不添加只能刷新一次
})
bScroll.on('pullingUp', function() { // 配合pullUpLoad使用
console.log('上拉加载');
for(var i = 0; i < 3; i++) { // 每次添加3个li
var li = document.createElement('li');
li.innerText = '新来的' + i;
uls.appendChild(li);
}
bScroll.finishPullUp(); // 完成上拉，如果不添加只能上拉一次
})
bScroll.maxScrollY = -100;
}
</script>
代码并不完善，还有很多不足之处，有待完善。仅供大家相互学习参考。
我自己并不是一个聪明的人，有很多时候看网站或API时，都无法一下就理解它所叙述的意思或使用方法，总是要反复的尝试后才能得到结果。希望在我的理解下能帮助到正在学习的朋友，希望你在学习的路上有所助力！
