关于大屏无限滚动插件vue-seamless-scroll 无法手动滚动的替代方案

vue-seamless-scroll 在自动滑动时存在无法手动上下滚动的问题,只能在移动端使用touch的方式滚动

解决方式

@david-j/vue-j-scroll改动了鼠标滑动距离解决了滚动的问题

yarn add @david-j/vue-j-scroll

使用插件

// 
<vue-j-scroll
    style="height: 100%"
    :steep="0.5"
    scrollDirection="top"
    :isRoller="true"
    :rollerScrollDistance="50"
    >
    <div class="item" v-for="user in list" :key="user.id">
      <div class="left">
        <img :src="user.imgurl" alt="" />
      </div>
      <div class="right" style="text-align: left">
        <div class="top">{{ user.name }}</div>
        <div class="zhiwei">
          <div class="infoTitle">
            <img id="zwImg" src="@/assets/images/person.png" alt="" />
            <span class="nowrap">职位：</span>
            <span class="content">{{ user.post }}</span>
          </div>
        </div>
        <div class="phone" style="margin-top: 20px">
          <div class="infoTitle" style="align-items: center">
            <img src="@/assets/images/unit.png" alt="" />
            <span>单位：</span>
          </div>
          <div class="content">{{ user.unit }}</div>
        </div>
      </div>
    </div>
</vue-j-scroll>