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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue考试链接重置(Vue实现答题功能)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue源码系列教程(vue使用引用库中的方法附源码)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
热门推荐
- javascript的执行顺序
- 宝塔web服务器如何安装(宝塔面板开启Nginx/Apache防火墙四层防御的方法)
- docker多个端口怎么分(Docker多个容器不能有相同端口号的处理方案)
- css3动画360循环旋转(利用纯CSS3实现文字向右循环闪过效果实例可用于移动端)
- python停止执行的代码(python定时检测无响应进程并重启的实例代码)
- qt和js相互调用(QT与javascript交互数据的实现)
- web渗透网络基础(响应式Web之流式网格系统)
- js截取字符串
- sqlserver 添加分区(SQL Server 数据库分区分表水平分表详细步骤)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9