vue实现无缝滚动,vue页面滚动动画
本文主要详细介绍用vue实现伪3D切换滚动效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现3D切换滚动效果的具体代码，供大家参考。具体内容如下
今天写一个项目，遇到一个点击切换的滚动需求，贴出来，做了记录。
这是最后的效果。点击左右小箭头实现滚动效果，但只是简单的滚动，没有动画之类的。
实现思路：
Css，正常写一个div，用display:flex平铺图片，然后在中间位置定位一个方框，方框的大小比外面的大，中间的图片可以从列表中随机选择。在js中，用v-for循环列表点击右侧时，删除循环列表中的第一张图片，然后添加到列表中的最后一张，用同样的方法点击左侧。这样，可以简单地实现无缝循环效果。最重要的一点，因为中间是梯形的，要么UI给个框，前端设置在隐藏属性之外，达到梯形的效果，要么你可以用polygon的css属性调出一个多边形粘贴代码，看看。
//html
//!-滚动-
div class=滚动
div class=滚动容器
差异
卷包机
imgList中的v-for=(v，I
:key=i
@click=handleImg(v)
图片
:src= require(`@/assets/images/home/company/$ { v . img } . jpg `)
class=img
/
/div
！-左渐变阴影-
div class=左渐变/div
div class=滚动阴影/div
！-右侧渐变阴影-
div class=渐变-右/div
/div
！-中间放大层-
div class=photo-bg/div
图片
:src=
require(`@/assets/images/home/company/$ { this . img list[1]。img}.jpg `)
img-large
/
图片
:src= require(`@/assets/images/home/company/photo-BG . png `)
梯形的
/
！-底部开关-
div class=top-botton
div class= BTN-left @ click= previous /div
div class= center-text“{ this . img list[1]”。text }}/div
div class= BTN-right @ click= next /div
/div
/div
//js
data () {
返回{
imgList: [
{
img:“活动-01”，
正文：“2020职称宣传活动”，
},
{
img:“活动-02”，
正文：“2020职称宣传活动1”，
},
{
img:“活动-03”，
正文：“2020职称宣传活动2”，
},
],
}
}
methdos: {
//点击左侧
上一个(){
const direction= left
this.scrollImg(方向)；
},
//点击右侧
下一个(){
const direction= right
this.scrollImg(方向)；
},
//处理滚动列表图片
滚动(方向){
if (direction===left) {
const first=this . img list . shift()；
this.imgList.push(第一)；
}否则{
const last=this . img list . pop()；
this . img list . un shift(last)；
}
console . log()；
},
}
//css键码
//绘制多边形
//这些属性逆时针旋转
裁剪路径：多边形(4% 4%，1% 90%，95% 90%，92% 4%)；
按照设计稿慢慢调整。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。