vue实现无缝轮播效果的示例代码

　　介绍

小编给大家分享一下vue实现无缝轮播效果的示例代码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

具体内容如下

1。首先创建两个vue组件Sweiper.vue和SweiperItem.vue;

2。将两个组件引入页面,Sweiper。vue中用v模型传参(v模型其实是语法糖,默认属性价值和默认事件输入),
代码中我是通过v模型的精致而将值传给Sweiper(子组件),自动轮播时子组件再通过触发输入事件将即将显示的值传回给父组件

3。核心是要让选中的值传到SweiperItem中,与SweiperItem中值的名称相等判该显示哪张图片;

& lt; template> 　　& lt;才能div> 　　,,,& lt; Sweiper  v模型=皊elected"比; 　　,,,,,& lt; ! - v模型是个语法糖,相当于值和输入事件——比; 　　,,,,,& lt; Sweiper-item , name=癷tem1"比; 　　,,,,,,,& lt; div 类=癷tem"比; 　　,,,,,,,,,& lt; img  https://www.yisu.com/zixun/: src=" getImg (01)“alt=" "> 　　
　　 　　 　　
　　: 　　
　　 　　 　　
　　: 　　
　　 　　 　　
　　 　　这里的图片没有通过数组用v代表循环,方便大家看其结构形式 　　<>脚本 　　从“. ./组件/导入Sweiper Sweiper.vue”; 　　从“. ./组件/导入SweiperItem SweiperItem.vue”; 　　出口默认{ 　　名称:“mySweiper”, 　　组件:{ 　　Sweiper, 　　SweiperItem 　　}, 　　数据(){ 　　返回{ 　　选择:“item1”//默认第一张 　　} 　　}, 　　方法:{ 　　getImg (url) { 　　url返回“img/" + + " . jpg " 　　}, 　　 　　}, 　　安装(){/* setInterval ()=> { 　　this.selected=暗诙酢? 　　},3000) 　　此时因为安装只执行一次,所以还是不变,需要在Sweiper写一个监看听 　　}*/这一步注释是因为换到Sweiper组件中写了 　　}> 　　.item {/*边境:1 px固体黑色;*/} 　　.item> img { 　　宽度:100%;/*高度:0.1雷姆;*/} 　　

Sweiper。vue

& lt; template> 　　& lt;才能div 类=癝weiper"比; 　　,,,& lt; slot> & lt;/slot> 　　& lt;才能/div> 　　& lt;/template> 　　& lt; script> 　　 　　export 才能;default  { 　　,,,的名字:,“Sweiper", 　　,,,的数据(),{ 　　,,,,,返回{ 　　,,,,,,,现在:& # 39;& # 39; 　　,,,,,} 　　,,,}, 　　,,,道具:{ 　　,,,,,的值:{ 　　,,,,,,,类型:字符串, 　　,,,,,,,默认值:““ 　　,,,,,}, 　　,,,}, 　　,,,安装(){ 　　,,,,,//自动轮播时查找名字值用indexOf的方法遍历出当前轮播的下表 　　,,,,,this.names=children.map美元。(孩子=祝辞{ 　　,,,,,,return  child.name 　　,,,,,}); 　　,,,,,这只showImg (); 　　,,,,,这又是;苍白的() 　　,,,}, 　　,,,方法:{ 　　,,,,,showImg () { 　　,,,,,,,this.current=this.value | |。孩子美元[0]. name; 　　,,,,,,,//当前实例的直接子组件 　　,,,,,,,这个。children.map美元(vm=祝辞{ 　　,,,,,,,,,vm.selected=this.current 　　,,,,,,,}) 　　,,,,,}, 　　 　　,,,,,发青的(){ 　　,,,,,,,//每次轮播把图片做调整 　　,,,,,,,this.timer=setInterval(()=祝辞{ 　　,,,,,,,,,//indexOf返回某个指定字符串首次出现的位置 　　,,,,,,,,,const 指数=this.names.indexOf (this.current); 　　,,,,,,,,,let  newIndex=指数+ 1; 　　,,,,,,,,,//严谨一点 　　,,,,,,,,,if  (newIndex===this.names.length) { 　　,,,,,,,,,,,,newIndex=0; 　　,,,,,,,,,} 　　,,,,,,,,,,美元发出(“input", this.names [newIndex]) 　　,,,,,,,},3000) 　　,,,,,} 　　,,,}, 　　,,,看:{ 　　,,,,,//监听值值,发生变化就改变 　　,,,,,的值(){ 　　,,,,,,,这只showImg () 　　,,,,,} 　　,,,}, 　　,,,beforeDestroy (), { 　　,,,,,//实列销毁前 　　,,,,,clearInterval (this.timer) 　　,,,} 　　,,}; 　　& lt;/script> 　　& lt; style> 　　.Sweiper{才能 　　,,,/*边境:,1 px  solid 黑色;*/null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

vue实现无缝轮播效果的示例代码