vue实现无缝轮播效果(跑马灯)


Posted in Vue.js onMay 14, 2021

本文实例为大家分享了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>
  <div>
    <Sweiper v-model="selected">
      <!--v-model是个语法糖,相当于value和input事件-->
      <Sweiper-item  name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</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>
  <div class="Sweiper">
    <slot></slot>
  </div>
</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>
    <div class="Sweiper-item" v-show="isShow">
      <slot></slot>
    </div>
  </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.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
You might like
PHP 模板高级篇总结
2006/12/21 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
PyCharm设置护眼背景色的方法
2018/10/29 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
经营理念标语
2014/06/21 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
实习单位鉴定意见
2015/06/04 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS