vue实现3D切换滚动效果
作者：深圳最菜的前端
这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现3D切换滚动效果的具体代码，供大家参考，具体内容如下
今天写项目，遇到一个点击切换的滚动需求，贴出来，做一个记录
这个是最终的一个效果，点击左右小箭头，实现滚动效果，但是只是简单滚动，没有动画之类的
实现思路：
css中，正常写一个div用display:flex来平铺图片- 然后中间位置定位一个框，框大小比外面的大，中间图片随意取列表中的一个就行
js中，使用v-for循环列表- 点击右侧时，将循环列表中的第一个图片删除，然后添加到列表最后一个，点击左侧时同理，这样，就能简单实现一个无缝循环的效果了
- 最重要的一点，因为中间时梯形，要么就是让UI给一个框，前端设置超出隐藏属性，达到梯形效果，要么就是自己用
polygon这个css属性调出一个多边形出来
贴一下代码，看看
// html
// <!-- 滚动 -->
<div class="rolling">
<div class="rolling-container">
<div
class="rolling-wraper"
v-for="(v, i) in imgList"
:key="i"
@click="handleImg(v)"
>
<img
:src="require(`@/assets/images/home/company/${v.img}.jpg`)"
class="img"
/>
</div>
<!-- 左侧渐变阴影 -->
<div class="gradient-left"></div>
<div class="rolling-shadow"></div>
<!-- 右侧渐变阴影 -->
<div class="gradient-right"></div>
</div>
<!-- 中间放大层 -->
<div class="photo-bg"></div>
<img
:src="
require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
"
class="img-large"
/>
<img
:src="require(`@/assets/images/home/company/photo-bg.png`)"
class="trapezoidal"
/>
<!-- 底部切换 -->
<div class="top-botton">
<div class="btn-left" @click="previous"></div>
<div class="center-text">{{ this.imgList[1].text }}</div>
<div class="btn-right" @click="next"></div>
</div>
</div>// js
data () {
return {
imgList: [
{
img: 'activity-01',
text: '2020年职称宣传活动',
},
{
img: 'activity-02',
text: '2020年职称宣传活动1',
},
{
img: 'activity-03',
text: '2020年职称宣传活动2',
},
],
}
}
methdos: {
// 点击左侧
previous() {
const direction = 'left';
this.scrollImg(direction);
},
// 点击右侧
next() {
const direction = 'right';
this.scrollImg(direction);
},
// 处理滚动列表图片
scrollImg(direction) {
if (direction === 'left') {
const first = this.imgList.shift();
this.imgList.push(first);
} else {
const last = this.imgList.pop();
this.imgList.unshift(last);
}
console.log();
},
}// css重点代码 // 绘制多边形 // 这几个属性为逆时针旋转 clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);
具体就根据设计稿慢慢调整
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。