一个简单的无缝滚动,最近折磨了我好久,记录一下。

先上一下最终实现效果:
在这里插入图片描述
最开始html标签用的tabletheadtbody然后结合animate和settimeout实现的,但是实现之后每次滚动都抖一下,也找不到原因;后来寻思是不是table的原因,于是换成div试了一下,原来的问题解决了但是出现了新问题:滚动不流畅,就像网速不好似的。。。于是,我又换成了现在的vue-seamless-scroll组件,完美!上代码:

	<div class='table'>
      <div class='table_head'>
        <ul>
          <li>团队名称</li>
          <li>班次</li>
          <li>姓名</li>
          <li>联系方式</li>
        </ul>
      </div>
      <vue-seamless-scroll
        :data="tableData"
        :class-option="optionSetting"
        class="seamless-warp">
          <ul class="item">
              <li v-for="(item, index) in tableData" :key="index">
              <span v-for="(rowitem, index) in item" :key="index">
                {{rowitem}}
              </span>
            </li>
          </ul>
      </vue-seamless-scroll>
	</div>
import vueSeamless from 'vue-seamless-scroll'
export default {
  name: 'DutyInfo',
  components: {
    vueSeamless
  },
  data () {
    return {
      tableData: []
    }
  },
  async created () {
    let _this = this
    await this.$api.getDuty().then((res) => {
      _this.tableData = res.value.dutyTable.map(v => [v['teamName'], v['schedule'], v['personName'], v['tel']])
    })
  },
  computed: {
    optionSetting () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}

vue-seamless-scroll的使用方法

安装

npm install vue-seamless-scroll --save

引用

在main.js文件里引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

使用

见上述代码,常用配置参数如下表:

keydescriptiondefaultval
step数值越大速度滚动越快1Number
limitMoveNum开启无缝滚动的数据量5Number
hoverStop是否启用鼠标hover控制trueBoolean
direction方向 0 往下 1 往上 2向左 3向右1Number
openTouch移动端开启touch滑动trueBoolean
singleHeight单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/10Number
singleWidth单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/30Number
waitTime单步停止等待时间(默认值1000ms)1000Number
switchOffset左右切换按钮距离左右边界的边距(px)30Number
autoPlay是否自动播放使用switch切换时候需要置为falsetrueBoolean
switchSingleStep手动单步切换step值(px)134Number
switchDelay单步切换的动画时间(ms)400Number
switchDisabledClass不可以点击状态的switch按钮父元素的类名disabledString
isSingleRemUnitsingleHeight and singleWidth是否开启rem度量falseBoolean
Logo

前往低代码交流专区

更多推荐