弹性滚动@better-scroll/core

效果

步骤

1. 安装

  yarn add @better-scroll/core  

  mounted() {
    
    
    this.$nextTick(() => {
    
    
      let bs = new BScroll('.scroll-wrap', {
    
    
        scrollX: true
      })
    })
  },
  

3. 引入插件 js

 import BScroll from '@better-scroll/core'

5. 布局 HTML

  <div class="scroll-wrap">
      <ul class="content">
        <li v-for="i in lista" :key="i.id" class="scroll-item">
          <p class="menu_t">
            <img :src="i.icon" alt />
          </p>
          <p class="menu_f">{
    
    {
    
    i.name}}</p>
        </li>
      </ul>
    </div>
    
    样式 父元素需要可视窗口winth:100vw;