vue横向无缝滚动以和点击按钮切换

插件官网：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html

1. 引入vue-seamless-scroll

npm

npm install vue-seamless-scroll --save

yarn

yarn add vue-seamless-scroll

2. 在main.js文件里面引入使用

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

3. 页面配置

1.  
   <vue-seamless-scroll :data="data" :class-option="optionSwitch" class="seamless-warp3">
2.  
   <span v-if="data.length > 4" slot="left-switch" class="left-arrow"></span>
3.  
   <span v-if="data.length > 4" slot="right-switch" class="right-arrow"></span>
4.  
   <ul class="item" :style="`width:${455 * (data.length 1)}px`">
5.  
   <li v-for="(item, index) in data" :key="index">
6.  
              //需要轮播的组件或者数据
7.  
   <parameter :data="item" :title="item[0].bak1"></parameter>
8.  
   </li>
9.  
   </ul>
10.  
    </vue-seamless-scroll>

computed配置

1.  
   computed: {
2.  
   optionSwitch2: {
3.  
   get() {
4.  
   return {
5.  
   navigation: true,//左右方向的滚动是否显示控制器按钮
6.  
   switchSingleStep: 450,//点击切换移动的 step 值(px)
7.  
   direction: 3,//方向: 0 往下 1 往上 2 向左 3 向右。
8.  
   switchOffset: 10，//左右切换按钮距离左右边界的边距(px)。
9.  
   }
10.  
    }
11.  
    }
12.  
    },

4. css

1.  
   .seamless-warp3 {
2.  
   pointer-events: auto;
3.  
   overflow: hidden;
4.  
   // height: 140px;
5.  
   // width: 453px * 4;
6.  
   width: 1891px;
7.  
   margin: 0 auto;
8.  
    
9.  
   .left-arrow,
10.  
    .right-arrow {
11.  
    position: relative;
12.  
    display: inline-block;
13.  
    width: 26px;
14.  
    height: 113px;
15.  
    border-radius: 50%;
16.  
    background-color: #00a0e9;
17.  
    cursor: pointer;
18.  
     
19.  
    // &:hover {
20.  
    // background-color: #0f39fa;
21.  
    // }
22.  
    &::before {
23.  
    position: absolute;
24.  
    content: '';
25.  
    width: 16px;
26.  
    height: 16px;
27.  
    top: 12px;
28.  
    left: 15px;
29.  
    border: 2px solid #fff;
30.  
    }
31.  
    }
32.  
     
33.  
    //左右切换按钮的样式
34.  
    .left-arrow {
35.  
    background: url('../images/right-arrow.png') no-repeat;
36.  
    }
37.  
     
38.  
    .right-arrow {
39.  
    background: url('../images/left-arrow.png') no-repeat;
40.  
    }
41.  
     
42.  
    .left-arrow::before {
43.  
    display: none;
44.  
    }
45.  
     
46.  
    .right-arrow::before {
47.  
    display: none;
48.  
    }
49.  
     
50.  
    ul,
51.  
    li {
52.  
    margin: 0;
53.  
    padding: 0;
54.  
    list-style: none;
55.  
    }
56.  
     
57.  
    ul.item {
58.  
    display: flex;
59.  
    align-items: flex-end;
60.  
     
61.  
    li {
62.  
    height: auto;
63.  
    }
64.  
    }
65.  
    }