BetterScroll

日常有许多业务代码，会要求实现滚动功能，比如某东的商城

这样的效果不难，但是用原生的overflow:scroll实现不了灵动的效果，所以引入了一款插件better-scroll

使用

因为要在代码里使用，所以是-S

npm i better-scroll -S

<!-- 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>

// <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*/
.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倍

// import BScroll from 'better-scroll'
import BScroll from '@better-scroll/core'