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 router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue 排班安排(vue实现钉钉的考勤日历)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9