vue点击按钮切换图片,vue卡片左右滑动
这篇文章主要为大家详细介绍了某视频剪辑软件卡片式点击切换图片组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件卡片式点击切换图片组件，供大家参考，具体内容如下
因为公司业务的问题，最近在写某视频剪辑软件项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用某视频剪辑软件是以数据驱动的原理，写了一个不太完整的某视频剪辑软件组件，为了简单，就直接上代码吧
全部代码
未进行小道具传参设置，以后完善（简单最好嘛)
模板
！-
*以数据驱动的卡片式展示图片（无动画效果)
* -
div class=cardBanner
保险商实验所
li v-for=(item，index) in cardData :key=index
a href=#
img :src=item.src alt=
p这图片的描述{{item.order}}/p
/a
/李
div class= arrow-left @ click= toggle fun(-1) lt；/div
div class= arrow-right @ click= toggle fun(1) gt；/div
/ul
/div
/模板
脚本
导出默认值{
data(){
返回{
卡片数据：[
{id:1，src:require(./assets/images/banner.jpg )，}，
{id:2，src:require(./assets/images/text.jpg)}，
{id:3，src:require(./资产/图像/组6@2x.png)}，
{id:4，src:require(./assets/images/text.jpg)}，
{id:5，src:require(./assets/images/banner.jpg)}
]
}
},
方法：{
//通过函数改变数据从而达到视图的改变
toggleFun(p){
这个。卡片数据=这个。卡片数据。映射((项目，索引，数组)={
if(index===array。长度-1p===1){
item=array[0]
}
else if(index===0p===-1){
item=array[array。长度-1]；
}否则{
item=array[index p]；
}
退货项目；
})
}
}
}
/脚本
样式范围。cardBanner{
填充：10像素30像素
背景色：# fff
边框：1px纯色# ccc
位置：相对；
}。cardBanner ul{
显示器：flex
溢出：滚动；/*设置滚动条*/
}。卡片横幅ul:-WebKit-滚动条{/*隐藏滚动条*/
显示：无；
}。cardBanner ulli{ //高能部分，弹性不太好解释
宽度：31.33333%;
伸缩：0;
左填充：3%;
文本对齐：居中；
}。cardBanner ulli:第一个孩子{
左填充：0;
}。cardBanner ulli a{
显示：块；
宽度：100%;
身高：100%;
}。cardBanner ulli img{
宽度：100%;
高度：170像素
边框半径：5px
}。cardBanner ulli p{
边距：0;
}
[class^=arrow]{
字体大小：30px
转换：scaleX(。7);
颜色：# ddd
}。向左箭头{
位置：绝对；
左：5px
top:50%；
边距-顶部：-17px；
}。向右箭头{
位置：绝对；
右：5px
top:50%；
边距-顶部：-17px；
}
/风格
效果展示
稍微讲一下，采用flex！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。