Loading... # BetterScroll 日常有许多业务代码，会要求实现滚动功能，比如某东的[商城](https://so.m.jd.com/webportal/channel/m_category?searchFrom=bottom&sceneval=2&jxsid=16274593433488642475) 这样的效果不难，但是用原生的`overflow:scroll`实现不了灵动的效果，所以引入了一款插件[better-scroll](https://www.npmjs.com/package/better-scroll) # 使用 因为要在代码里使用，所以是`-S` ```sh npm i better-scroll -S ``` ```html <!-- template --> <div class="left-content" ref="leftScroll"> <div class="left"> <div :class=" leftActive === index ? 'left-item left-item-active' : 'left-item' " v-for="(item, index) in categoryList" :key="index" @click="leftItemClick(index)" > {{ item }} </div> </div> </div> ``` ```js // <script lang="ts"> import BScroll from 'better-scroll' setup: () => { const leftActive = ref<number>(0) const leftScroll = ref<HTMLElement | null>(null) // 此处应该写入一个内容列表，如['热门推荐','手机数码','...'] const categoryList = [] onMounted(() => { const leftBs = new BScroll(leftScroll.value, { scrollY: true, click: true }) }) const leftItemClick = (e: number) => { leftActive.value = e } return { leftActive, categoryList, leftItemClick } } ``` ```css /* css*/ .left-content{ /* 此处高度必须，根据业务实际情况而定 */ height: 100vh } .left{ /* 此处高度不写，根据子元素高度自适应 */ } .left-item{ text-align: center; height: 100px; line-height: 100px; color: #333; } .left-item-active{ color: #e93b3d; } ``` # 注意 刚开始的情况下很可能出现插件生效，但是滑动不了的情况，值得注意的是，引入插件的元素和引入插件元素的子元素的高度(若是横向滑动，则是宽度)的关系 引入插件元素的高度 < 引入插件子元素高度 即`.left-content`的高度必须小于`.left`的高度，这样scroll才会生效 # 优化 由于我们只用到了简单的滚动功能，我们可以把关键的内容引入，其他的不用， 引入时候把引入变成下面这句，原来110K的插件引用就只有38K了，资源加载速度提升3倍 ```js // import BScroll from 'better-scroll' import BScroll from '@better-scroll/core' ``` 最后修改：2022 年 09 月 15 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏