Desplazamiento elástico @ mejor desplazamiento / núcleo

efecto

Inserte la descripción de la imagen aquí

paso

  1. instalación
  yarn add @better-scroll/core  
  mounted() {
    
    
    this.$nextTick(() => {
    
    
      let bs = new BScroll('.scroll-wrap', {
    
    
        scrollX: true
      })
    })
  },
  
  1. Introducir plugin js
 import BScroll from '@better-scroll/core'
  1. Diseño 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;

Supongo que te gusta

Origin blog.csdn.net/weixin_54645059/article/details/112745283
Recomendado
Clasificación