标签：vue 滚动 res seamless data 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)
    }
  },
}

标签：vue,滚动,res,seamless,data,scroll,无缝
来源： https://www.cnblogs.com/pleaseAnswer/p/15292938.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。