今天写项目，遇到一个点击切换的滚动需求，贴出来，做一个记录
这个是最终的一个效果，点击左右小箭头，实现滚动效果，但是只是简单滚动，没有动画之类的
css中，正常写一个div用display:flex来平铺图片js中，使用v-for循环列表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%);
具体就根据设计稿慢慢调整
