美文网首页
vue-slide轮播笔记

vue-slide轮播笔记

作者: 幸宇 | 来源:发表于2018-03-02 10:56 被阅读22次

在做练习的时候,在vue开发中我们可以自己写一个轮播组件,里面用到了父子组件的传递,学习一下,并记录下来

父组件:index.vue
子组件:slideShow.vue

1.向index中导入并注册组件

import slideShow from '../components/slideShow.vue'
 components:{
    slideShow
  },
dom中使用:
  <slide-show></slide-show>

2.编写slideShow子组件(静态)

  <div class="slide-show" >
      <div class="slide-img">
          <a href="">
                  <img v-if="show" :src="slides[nowIndex].src" alt="">
          </a>
      </div>
      <h2>title标题</h2>
      <ul class="slide-pages">
          <li>&lt;</li>
          <li>
              <a>1</a>
              <a>1</a>
          </li>
          <li >&gt;</li>
      </ul>
  </div>

3.在父组件中,编写数据属性并通过props向子组件传递

data(){
      return{
             invTime: 2000,
      slides: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'http://xxx.xxx.com'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
      ],

使用:

      <slide-show :slides="slides" :inv="invTime" @onchange="onchangedosomething"></slide-show>

4.编写子组件里面的方法,通过props定义父组件的属性,slides和inv
子组件的结构:

<template>
  <div class="slide-show" @mouseover="clearIv" @mouseout="runIv">
      <div class="slide-img">
          <a :href="slides[nowIndex].href">
              <transition name="slide-trans">
                  <img v-if="show" :src="slides[nowIndex].src" alt="">
              </transition>
              <transition name="slide-trans-old">
                  <img v-if="!show" :src="slides[nowIndex].src" alt="">
              </transition>
          </a>
      </div>
      <h2>{{slides[nowIndex].title}}</h2>
      <ul class="slide-pages">
          <li @click="goto(prev)">&lt;</li>
          <li v-for="(item,index) in slides" @click="goto(index)">
              <a :class="{on:index===nowIndex}">{{index+1}}</a>
          </li>
          <li @click="goto(next)">&gt;</li>
      </ul>
  </div>
</template>

js定义:


export default {
  props:{
      slides:{
          type:Array,
          default:[]
      },
      inv:{
          type:Number,
          default:1000
      }
  },
  data(){
      return{
          nowIndex:0,
          show:true
      }
  },
  methods:{
      goto(index){
          this.show=false;
          setTimeout(()=>{
              this.show=true
              this.nowIndex=index;
              this.$emit('onchange',index) //向父组件传递事件 onchange
          },10)
          
      },
      runIv(){
          this.inId=setInterval(()=>{
              this.goto(this.next)
            //   console.log(1234)
          },this.inv)
      },
      clearIv(){
          clearInterval(this.inId)
      }
  },
  mounted(){
      this.runIv();
  },
  computed:{
      prev(){
          if(this.nowIndex===0){
              return this.slides.length-1
          }else{
              return this.nowIndex-1
          }
      },
      next(){
          if(this.nowIndex===this.slides.length-1){
              return 0
          }else{
              return this.nowIndex+1
          }
      }
  }
}

5.在轮播的时候加入过渡效果
css中注意transition的使用,在vue中也是有的,可加以利用

.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}

6.整体的css也写上吧:


<style scoped>
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  height: 30px;
  text-align: left;
  padding-left: 15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.slide-pages li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
}
.slide-pages li .on {
  text-decoration: underline;
}
</style>

最后的效果:


image.png

相关文章

  • vue-slide轮播笔记

    在做练习的时候,在vue开发中我们可以自己写一个轮播组件,里面用到了父子组件的传递,学习一下,并记录下来 父组件:...

  • 2021-12-16

    FutureBuilder 笔记 1.FutureBuilder 2.轮播图

  • JavaScript ☞ day4

    JavaScript基础学习笔记之轮播 轮播效果: index.html文件内容 loog.js文件内容 styl...

  • 轮播图笔记

    轮播图课程学完目标: 1.dom操作 2.定时器 3.事件 4.js动画 4.函数递归 5.无限滚动大法(不会轮播...

  • banner笔记

    今天忽然在项目中遇到了一个简单的jq轮播,忽然发现不会写了,费了好长时间回顾才弄出来轮播代码。做个学习笔记,不喜勿...

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • jQuery传统轮播、三位置轮播、呼吸轮播

    一、传统轮播 二、三位置轮播 三、呼吸轮播

  • #学习笔记#图片轮播

    1、CSS31)所有图片作为整体,有一个做外层容器;HTML框架: CSS动画: 按钮点击跳转:图片是以一个个体存...

网友评论

      本文标题:vue-slide轮播笔记

      本文链接:https://www.haomeiwen.com/subject/ikooxftx.html