文章内容
1623902326
详解 vue better-scroll滚动插件排坑
BetterScroll号称目前最好用的移动端滚动插件，因此它的强大之处肯定是存在的。要不...哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ，而是单讲滚动，想要深入了解它，请移步这里 。
滚动原理
better-scroll 是什么滚动原理
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了。横向滚动的原理一致就是将固定高度改为固定宽度。（这里就不啰嗦了）
纵向滚动
废话不多说，我们直接上代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <template> <div class="wrapper" ref="wrapper"> <ul> <li v-for="item in 8">{{item}}</li> </ul> </div></template><script> import BScroll from 'better-scroll'; export default { mounted() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper); }); } };</script><style type="text/css"> .wrapper{ overflow:hidden; height:100vh; } ul li{ height:400px; }</style> |
这是一个Vue BetterScroll纵向滚动demo,这里需要注意的有两点。
- 只能有一层父级div，也就是容器
- 父级div要设置溢出隐藏，并且固定高度
横向滚动
横向滚动，相比纵向滚动需要动态的去获取滚动区的宽度，直接上代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <template> <div class="tab" ref="tab"> <ul class="tab_content" ref="tabWrapper"> <li class="tab_item" v-for="item in itemList" ref="tabitem"> {{item.title}} </li> </ul> </div> </template> <script> import BScroll from 'better-scroll'; export default { data() { return{ itemList:[ { 'title':'关注' }, { 'title':'推荐' }, { 'title':'深圳' }, { 'title':'视频' }, { 'title':'音乐' }, { 'title':'热点' }, { 'title':'新时代' }, { 'title':'娱乐' }, { 'title':
*
|