vue-gapless-scroll v1.0.5

1. 适用于vue2的(无缝滚动,文字·图片轮播)组件

可用于数组的列表滚动,也可用于图片轮播，亦或随意一段文字的滚动

2. Install:

yarn add vue-gapless-scroll; (npm install vue-gapless-scroll)

3. Use:

import VueGaplessScroll from 'vue-gapless-scroll';
Vue.use(VueGaplessScroll)

4. Settings:

interface GaplessScrollOptions {
  // 0:无缝滚动(用于无点击事件) 1: 触底滚动(到达最后一个会返回顶部，用于点击事件滚动) (default:0)
  scrollType: number;

  // 滚动方向 up:向上滚动 down:向下 left:向左 right:向右 (default: 'up')
  direction: "up" | "down" | "left" | "right";

  // 滚动速度 数字越大越快 (default:1)
  speed: number;

  // 符合滚动条件后是否自动滚动 (default:true)
  autoPlay: boolean;

  // 鼠标悬停是否停止滚动 (default:true)
  hoverStop: boolean;

  // 单次滚动(轮播)距离(仅在interval不为0生效) (default:0)
  step: number;

  // 轮播停留间隔 0为自动滚动 (default:0)
  interval: number;

  // 带间隔的轮播(interval不为0)是否显示(左右/上下)控制器 (default:false)
  controls: boolean;

  // 自定义控制器时，两边控制器宽(左右滚动时)或高(上下滚动时)总和 (default:[0,0])
  // 即为外层容器width/height需补充的padding
  controlsPadding: number[]; 

  // 单次轮播动画时间(仅在点击(左右/上下)控制器时生效,0无动画) (default:0)
  animateTime: number;

  // 无内容时显示的图src (default:"")
  emptyImg: string;

  // 无内容时显示的文字 (default:"暂无数据")
  emptyText: string;

  // 无数据时图片显示大小 (default:"30%")
  emptyWidth: string;
  
  //  解决水平无缝时margin间隔问题 (default:0)
  marginBias: number;
}

props: {
  // 外容器宽度 (default:100)
  width: number;
  
  // 外容器高度 (default:200)
  height: number;

  // 数据(必须) (default:[])
  list: any[];

  // 配置选项 (default:{})
  options: Partial<GaplessScrollOptions>;
}

5. Examples:

    tip: ***list数组是必须的***

    1. 【上下】滚动时(direction: 'up' | 'down'): 
        -span的高度为40px, 超过5条即滚动 则height为200px,width任意;
        -间隔时间后再次滚动，则:
            scrollOptions:{
                interval:3000,
                step: 40
            }
        -当设置了interval和step，即可当做轮播使用，文字轮播或图片轮播都可,
         如需要【上下】控制器,可以自定义控制器slot内容('up','down'):
            scrollOptions:{
                direction:'up',
                interval:3000,
                step: 40,
                controls:true,
                // padding的大小视自定义slot的【内容高】而定,slot的高为50，则【上下】为50，
                // 此时注意height应在原基础上加 50 * 2 = 100,即原先height: 200 现在height:300
                controlsPadding:[50,0],
                // 切换内容的动画时间
                animateTime: 0.4
            }

        <VueGaplessScroll
            :width="100"
            :height="200"
            :list="data"
            :options="scrollOptions"
        >
            <div class="scroll-box">
                <span class="scroll-item" v-for="v in data" :key="v">{{ v }}</span>
            </div>
        </VueGaplessScroll>

    2. 【左右】滚动时(direction: 'up' | 'down'): 

        -span的宽度为100px,超过3条即滚动, 则width为300px, height任意;
        -间隔时间后再次滚动，则:
            scrollOptions:{
                direction:'left',
                interval:3000,
                step: 100
            }
        -当设置了interval和step，即可当做轮播使用，文字轮播或图片轮播都可,
         如需要【左右】控制器,可以自定义控制器slot内容('left','right'):
            scrollOptions:{
                direction:'left',
                interval:3000,
                step: 100,
                controls:true,
                // padding的大小视自定义slot的【内容宽】而定,slot的宽为50，则【左右】为50,
                // 此时注意width应在原基础上加 50 * 2 = 100,即原先width: 300 现在width:400
                controlsPadding:[0,50],
                // 切换内容的动画时间
                animateTime: 0.4
            }

        <VueGaplessScroll
            :width="300"
            :height="100"
            :list="data"
            :options="scrollOptions"
        >
            <div class="scroll-box">
                <span class="scroll-item" v-for="v in data" :key="v">{{ v }}</span>
            </div>
        </VueGaplessScroll>