vue-multi-row-scroll

基于 Vue2 的多行滚动组件

Demo：https://xiaokar.gitee.io/vue-multi-row-scroll

Preview

Install

npm install vue-multi-row-scroll

Usage

<template>
  <div class="container">
    <h1>vue多行滚动</h1>
    <vue-multi-row-scroll
      class="MultiRowSwiper"
      :screenObj="screenObj"
      :reversalArr="['scroll2']"
      :propScrollList="scrollList"
      :speed="10"
      :imgWidth="clientWidth/2/3"
      :isHoverStop="true"
    />
  </div>
</template>

Attributes

| 参数 | 说明 | 类型 | 格式/案例 | 默认值 | 必须 | | -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ------ | ----- | | screenObj | 屏幕宽高变化自适应，使用父组件传入的方式防止多组件时监听冲突 | Object | {width:0,height:0} | {} | false | | propScrollList | 需要显示的图片对象数组 | Object | {key1:[['img1','img2']],key2:[['img1','img2']]} | {} | true | | reversalArr | 需要反向滚动的数组（对象key String） | Array | [key1,key2] | [] | false | | speed | 滚动速度（数值越小速度越快,建议1-100） | Number | 10 | 10 | false | | imgWidth | 图片宽度（可自己外部实现适配,会在原基础上自动增加左右各8px的边距） | Number | clientWidth/2/3 | 200 | false | | isHoverStop | 是否鼠标移入暂停 | Boolean | true | true | false |

完整案例参考

<template>
  <div class="container">
    <h1>vue多行滚动</h1>
    <vue-multi-row-scroll
      class="MultiRowSwiper"
      :screenObj="screenObj"
      :reversalArr="['scroll2']"
      :propScrollList="scrollList"
      :speed="10"
      :imgWidth="clientWidth/2/3"
      :isHoverStop="true"
    />
  </div>
</template>

<script>
import VueMultiRowScroll from "vue-multi-row-scroll";

export default {
  components: {
    VueMultiRowScroll,
  },
  data() {
    return {
      screenObj: {},
      scrollList: {
        scroll1: [
          [
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg")
          ],
        ],
        scroll2: [
          [
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg")
          ],
        ],
        scroll3: [
          [
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg"),
            require("@/assets/demo.jpg")
          ],
        ],
      },
      clientWidth: 0,
    };
  },
  mounted() {
    // 监听页面尺寸变化
    const that = this;
    window.onresize = () => {
      that.screenObj = {
        width: document.body.clientWidth,
        height: document.body.clientHeight,
      };
      this.clientWidth = this.screenObj.width || document.body.clientWidth;
    };
    this.clientWidth = this.screenObj.width || document.body.clientWidth;
  },
};
</script>
<style lang="less" scoped>
.container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 0 120px;
  margin: 0 auto;
  position: relative;
  h1{
    color: white;
    font-size: 70px;
    position: relative;
    z-index: 2;
  }
  
}
@media screen and (max-width: 1440px) {
  h1{
    width: 100%;
    text-align: center;
    pointer-events: none;
  }
  .MultiRowSwiper{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

讨论与反馈

QQ：8048117423

作者：xiaokar

博客：https://xiaokar.gitee.io

如有问题可以给本项目 提交 issue

如果vue-multi-row-scroll帮助到了你，欢迎 star，你的 star 是我改 BUG 的动力 ヾ(ゝω・)ノ