v-horizontal-scroll v0.0.1

#横向滚动插件 #安装

npm install v-horizontal-scroll --save
/*or*/
yarn add v-horizontal-scroll

#使用

import { HorizontalScroll } from "v-horizontal-scroll";
import "v-horizontal-scroll/dist/v-horizontal-scroll.css";

#使用示例

<template>
  <div class="home">
    <div class="demo">
      <div class="wraper">
        <horizontal-scroll ref="scroll" :list="list">
          <!--参数为滚动项模型和当前索引-->
          <template v-slot="{ item, index}">
            <div class="item" :style="{ background: colors[index]}">
              {{item}}
              {{index}}
            </div>
          </template>
        </horizontal-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import { HorizontalScroll } from "../../packages/index";

export default {
  data() {
    return {
      colors: [
        '#C586C0',
        '#7BDCF0',
        '#1E1E1E'
      ],
      //滚动项目数据模型列表
      list: []
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.$refs["scroll"].refreshList();
    // });
    //延时加载数据
    //也可以通过接口加载数据
    setTimeout(() => {
      this.list = [
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        }
      ];
    }, 1000);
  },
  components: {
    HorizontalScroll
  }
};
</script>
<style lang="less" scoped>
.demo {
  width: 375px;
  height: 800px;
  border: 1px solid red;
  margin: 0 auto;
  box-sizing: border-box;

  .wraper {
    border: 1px sold green;
    //滚动项需指定宽度和高度
    .item {
      width: 375px;
      height: 100px;
      border: 1px solid red;
    }
  }
}
</style>