⑥ 使用vue-seamless-scroll实现无缝滚动

1. 安装

cnpm install vue-seamless-scroll -s

2. 在main.js中引入

// 无缝滚动插件
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3. 在vue的组件使用

<div v-if="positionList.length" class="mainBox">
  <vue-seamless-scroll :data="positionList " :class-option="optionSingleHeightTime" class="seamless-warp">
    <ul class="item">
      <li v-for="item in positionList">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</div>

数据绑定：

    created() {
      this.getJobList();
    },
    // 岗位信息
    getJobList() {
      const companyId = sessionStorage.getItem("enterpriseId");
      const jobFireId = sessionStorage.getItem("jobFireId");
      getCompanyPositionListPC({ companyId, jobFireId }).then((res) => {
        if (res.data.code === 0) {
          this.$nextTick(() => {
            this.positionList = res.data.data;
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },

设置滚动的样式：

computed: {
  optionSingleHeightTime() {
    return {
      step: 1.2, // 数值越大速度滚动越快
      limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight:0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1200 // 单步运动停止的时间(默认值1000ms)
    }
  },
}