vue轮播图代码(vue实现无缝轮播效果跑马灯)
类别:编程学习 浏览量:345
时间:2022-03-31 20:45:25 vue轮播图代码
vue实现无缝轮播效果跑马灯本文实例为大家分享了vue实现无缝轮播效果的具体代码,供大家参考,具体内容如下
1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue;
2.将两个组件引入页面,Sweiper.vue中用v-model传参(v-model 其实是语法糖,默认属性value和默认事件input);
代码中我是通过v-model的selcted将值传给Sweiper(子组件),自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件
3.核心是要让selected的值传到SweiperItem中,与SweiperItem中的name值相等判该显示哪张图片;
<template> <li> <Sweiper v-model="selected"> <!--v-model是个语法糖,相当于value和input事件--> <Sweiper-item name="item1"> <li class="item"> <img :src="getImg('01')" alt=""> </li> </Sweiper-item> <Sweiper-item name="item2"> <li class="item"> <img :src="getImg('02')" alt=""> </li> </Sweiper-item> <Sweiper-item name="item3"> <li class="item"> <img :src="getImg('03')" alt=""> </li> </Sweiper-item> </Sweiper> </li> </template> 这里的图片没有通过数组用v-for循环,方便大家看其结构形式 <script> import Sweiper from "../components/Sweiper.vue"; import SweiperItem from "../components/SweiperItem.vue"; export default { name: "mySweiper", components: { Sweiper, SweiperItem }, data() { return { selected: "item1",//默认第一张 } }, methods:{ getImg(url){ return "img/"+url+".jpg" }, }, mounted(){ /*setInterval(()=>{ this.selected="item2" },3000) 此时因为mounted只执行一次,所以还是不变,需要在Sweiper写一个watch监听 }*/这一步注释是因为换到Sweiper组件中写了 } </script> <style > .item{ /*border: 1px solid black;*/ } .item>img{ width: 100%; /*height: 0.1rem;*/ } </style>
Sweiper.vue
<template> <li class="Sweiper"> <slot></slot> </li> </template> <script> export default { name: "Sweiper", data() { return{ current:'' } }, props:{ value:{ type:String, default:"" }, }, mounted(){ //自动轮播时查找name值用indexOf的方法遍历出当前轮播的下表 this.names=this.$children.map(child=>{ return child.name }); this. showImg(); this. paly() }, methods:{ showImg(){ this.current=this.value||this.$children[0].name; //当前实例的直接子组件 this.$children.map(vm=>{ vm.selected=this.current }) }, paly(){ //每次轮播把图片做调整 this.timer=setInterval(()=>{ //indexOf返回某个指定字符串首次出现的位置 const index=this.names.indexOf(this.current); let newIndex=index+1; //严谨一点 if (newIndex===this.names.length){ newIndex=0; } this.$emit("input",this.names[newIndex]) },3000) } }, watch:{ //监听value值,发生变化就改变selected value(){ this. showImg() } }, beforeDestroy() { //实列销毁前 clearInterval(this.timer) } }; </script> <style> .Sweiper{ /*border: 1px solid black;*/ width: 100%; height: 4rem; overflow: hidden; margin: 0 auto; position: relative; } </style>
SweiperItem.vue
<template> <transition> <li class="Sweiper-item" v-show="isShow"> <slot></slot> </li> </transition> </template> <script> export default { name:"SweiperItem", data(){ return{ selected:"" } }, props:{ name:{ type:String, required:true }, }, mounted(){ }, computed:{ isShow(){ return this.selected===this.name; } } }; </script> <style> .v-enter-active,.v-leave-active{ transition: all 1s linear; } .v-leave-to{ transform:translate(-100%); } .v-enter{ transform: translate(100%); } .v-enter-active{ position: absolute; top:0; left: 0; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue怎么实现倒计时(Vue计时器的用法详解)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue怎么编写规则(vue使用节流函数的踩坑实例指南)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
热门推荐
- C#中equals和==的区别有哪些
- idea调试怎么配置tomcat(如何提升Idea启动速度与Tomcat日志乱码问题)
- javascript怎么判断对象类型(JavaScript对象内置对象,值类型和引用类型讲解)
- MySQL中ROUND四舍五入函数需要注意的地方
- mysql explain的用法
- MySQL中对varchar类型的排序
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- docker修改镜像配置文件(Docker配置本地镜像与容器的存储位置)
- mysql千万级别数据查询优化(mysql千万级数据量根据索引优化查询速度的实现)
- asp的定义和意义(小旋风ASPWEBServer是什么?有什么作用?)