vue实现卡片滚动效果_vue 卡片堆叠滑动

vue实现卡片滚动左右切换效果

HTML：

//最外层盒子
<div class="box_1">
	//内层盒子
	<div class="box_2"
	 :style="{  transform: 'translateX' + '(' + currentOffset + 'px' + ')',}">
		//中间放需要展示的div，样式按照自己需求写
	</div>
</div>
//左右移动按钮
<div class="left_butt" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
<div class="right_butt" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
1
2
3
4
5
6
7
8
9
10
11

CSS：

//最外层盒子添加样式
.box_22 {
	overflow: hidden;
}
//内层盒子添加样式
.box_11 {
	display: flex;
    transition: transform 150ms ease-out;
    transform: translatex(0px);
}
//内层循环展示div样式按需求写
1
2
3
4
5
6
7
8
9
10
11

JS：

data(){
	return{
		currentOffset: 0,
		windowSize: 4, //显示个数：每页展示个数
		paginationFactor: 305, //移动距离：每个内层展示div宽度(包括margin)
	}
}，
computed: {
	//判断是否是第一张/最后一张
    atEndOfList() {
      return (
        this.currentOffset <=
        this.paginationFactor * -1 * (this.items.length - this.windowSize)
      );
    },
    atHeadOfList() {
      return this.currentOffset === 0;
    },
  },
methods: {
	//点击左右移动按钮的方法
    moveCarousel(direction) {
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.paginationFactor;
        this.butt_ok = 1;
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.paginationFactor;
        this.butt_ok = 0;
      }
  	},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

最终效果：