首页 前端知识 vue-seamless-scroll无缝滚动组件使用方法详解 解决轮播空白缝隙问题(最后面)

vue-seamless-scroll无缝滚动组件使用方法详解 解决轮播空白缝隙问题(最后面)

2024-05-27 10:05:25 前端知识 前端哥 588 676 我要收藏

下载安装

1.npm

npm install vue-seamless-scroll --save

2.yarn

yarn add vue-seamless-scroll

使用

1、全局注册

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})

2、局部注册

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

3、简单使用

<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
</div>

4、配置项

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
autoPlay1.1.17版本前手动切换时候需要置为falsetrueBoolean
switchSingleStep手动单步切换step值(px)134Number
switchDelay单步切换的动画时间(ms)400Number
switchDisabledClass不可以点击状态的switch按钮父元素的类名disabledString
isSingleRemUnitsingleHeight and singleWidth是否开启rem度量falseBoolean
navigation左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为falsefalseBoolean

5、回调事件

namedescriptioncalback params
ScrollEnd一次滚动完成的回调事件null

6、实例

 7、整体代码(一定要给最容器高度,以及隐藏!)

 先看实例:

<template>
  <div>
      <vue-seamless-scroll
        :data="listData"
        :class-option="seamlessScrollOption"
        style="
          border: 1px solid white;
          height: 200px;
          overflow: hidden;
          width: 200px;
          color: white;
          font-size: 18px;
          text-align: center;
        "
      >
        <ul>
          <li
            v-for="(item, index) in listData"
            :key="index"
            style="padding: 10px; margin: 5px"
          >
            <span class="title">{{ item.title }}:</span
            ><span class="date">{{ item.time }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
  </div>
</template>
 
<script>
 
export default {
  props: {},
  data() {
    return {
      listData: [
        {
          title: "张三",
          time: "2021-08-09",
        },
        {
          title: "李四",
          time: "2021-08-09",
        },
        {
          title: "王五",
          time: "2021-08-09",
        },
        {
          title: "赵六",
          time: "2021-08-09",
        },
        {
          title: "前七",
          time: "2021-08-09",
        },
        {
          title: "孙八",
          time: "2021-08-09",
        },
      ],
    };
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.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: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

8、解决滚动出现空白问题:

当滚动第二轮时,在第一轮和第二轮的衔接处出现了空白,稍后第二轮从空白处跳出显示。而不是从底部出来,解决办法:

方法一:检查一下css样式,可能是布局出了问题,

我的是因为在子div中加了display:flex

方法二:清空下浏览器缓存试试

方法三:在vue-seamless-scroll中再复制一次滚动列表

方法四:*清除边距

* {

  padding: 0;

  margin: 0;

}

 在此感谢文章出处:

https://www.cnblogs.com/Plume-blogs/p/15562814.html

vue-seamless-scroll无缝滚动组件使用方法详解 - 路饭网

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9728.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!