vue.js轮播图,vue多张图为一组轮播展示
本文主要详细介绍vue的简单轮播图片。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue实现轮播图片的具体代码，供大家参考。具体内容如下
1.翻译
2.案例
模板
section class=body
section class=wrap
swiper:options= swipe option class= swiper-wrap ref= mySwiper v-if= banner . length！=0
swiper-slide v-for=(项目，索引)in banner :key=index
//点击图片跳转到哪里，这里跳转到首页。项目示例：{img: 3358 www。* * *.com/home/images/index _ img02.png，网址：/home}
img:src= item . img alt= @ click= skip _ out _ page(item . URL)/
/swiper-slide
！-常见的点-
v-for=(item，index)in banner :key= index slot= pagination /div
/swiper
/部分
/部分
/模板
脚本
导出默认值{
data() {
const that=this
返回{
imgIndex: 1，
swipe option:{
//是组件自己的属性。如果notNextTick设置为true，则组件不会通过NextTick实例化swiper，这意味着您可以在第一时间获取swiper对象。如果你只需要加载它并使用它做一些事情，这个属性必须为真。
notNextTick: true，
//循环，而不是每次都突然回到第一个
循环：真，
//初始化时设置slide的索引，加载页面时显示哪个，从0开始。
initialSlide: 0，
//自动播放
自动播放：{
/*切换轮播图片的时间，即从上次成功切换到需要再次切换的时间*/
延时：1500，
stopOnLastSlide: false，
/*触摸滑动后是否继续旋转。false，触摸后不要点击继续轮播。真，触摸后不要点击停止轮播，停在最后一页*/
disableOnInteraction: false
},
//滑动速度，时间单位，越小越快。和上面的延时不同，速度是完成切换所需的时间，延时是切换成功后停留多长时间才进行切换。
速度：800，
//滑动方向
方向：“水平”，
//用小手掌抓滑
没错，
开：{
//滑动后的回调函数
slideChangeTransitionStart:function(){
/* realIndex将滚动到当前幻灯片索引值*/
that . imgindex=this . real index-1；
},
},
//寻呼机设置
分页：{
艾尔：。“翻页键”，
可点击：真的，
类型：“项目符号”
}
},
横幅：[]
}
},
方法：{
跳过第五页{
window.location.href=v
},
get_data() {
这个。$http.get(test )。然后(res={
if(res.data.code==0000){
this.banner=res.data.img_info
}
});
}
},
已安装(){
this.get_data()
}
}
/脚本
样式lang=scss 。擦拭包装{
宽度：100%；
身高：210px
背景色：# fff
}。swiper-分页{
背景：# fff
}。swiper-分页-项目符号{
背景：# ccc
宽度：10px
高度：10px
不透明度：1；
}。swiper-pagination-bullet-active {
背景：# 00C293
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。