【VUE】用vue写一个轮播图组件（一）

背景手写个组件算是基础操作，懂得原理后可以自己手写或者拿别人的组件进行修改。思路用vue写轮播图主要就是靠vue动画。轮播效果靠v-if与设置下一个div的位置。流程先建立基本的框架，swiper.vue swiperItem.vue App.vueApp.vue中写用户自己的内容，swiperItem为swiper.vue的子组件，用来放轮播项。App.vue<...

业火之理

6520人浏览 · 2019-10-27 05:06:33

业火之理 · 2019-10-27 05:06:33 发布

背景

手写个组件算是基础操作，懂得原理后可以自己手写或者拿别人的组件进行修改。

思路

用vue写轮播图主要就是靠vue动画。轮播效果靠v-if与设置下一个div的位置。

流程

先建立基本的框架，swiper.vue swiperItem.vue App.vue
App.vue中写用户自己的内容，swiperItem为swiper.vue的子组件，用来放轮播项。

App.vue

<template>
  <swiper>
    <swiperItem>
      <div class="content">页面1</div>
    </swiperItem>
    <swiperItem>
      <div class="content">页面2</div>
    </swiperItem>
    <swiperItem>
      <div class="content">页面3</div>
    </swiperItem>
  </swiper>
</template>
<script>
import swiperItem from './components/SwiperItem'
import swiper from './components/Swiper'
export default {
  components: {
    swiper,
    swiperItem
  }
};
</script>
<style lang="stylus"></style>

swiper.vue

<template>
  <div class="swiper">
    <div class="viewport">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
    
}
</script>

swiperItem.vue

<template>
<div class="swiper-item">
    <slot></slot>
</div>
</template>
<script>
export default {
    
}
</script>

这样基本骨架就有了，页面中会显示3段文字。
下一步要使得页面只显示一项，我们需要加属性，使得条件渲染。

<template>
  <swiper v-model="selected">
    <swiperItem name = "box1">
      <div class="content">页面1</div>
    </swiperItem>
    <swiperItem name = "box2">
      <div class="content">页面2</div>
    </swiperItem>
    <swiperItem name = "box3">
      <div class="content">页面3</div>
    </swiperItem>
  </swiper>
</template>
<script>
import swiperItem from './components/SwiperItem'
import swiper from './components/Swiper'
export default {
    data:()=>{
        return {selected:'box3'}
    },
  components: {
    swiper,
    swiperItem
  }
};
</script>
<style lang="stylus"></style>

<template>
  <div class="swiper">
    <div class="viewport" >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        value:{
            type:String,
            default:''
        }
    },
    mounted(){
        this.$children.forEach(vm => {
            vm.selected = this.value
        });
    }
}
</script>

<template>
    <div class="swiper-item" v-if="name===selected?true:false" >
        <slot></slot>
    </div>
</template>

<script>
export default {
    props:{
        name:{
            type:String,
            required:true
        }
    },
    data(){
        return {selected:''}
    },
    mounted(){
    }
}
</script>

这样就可以进行条件渲染了，变动App.vue的selected属性可以改变渲染的页面。
然后稍微修改一下，增加点样式。试着去在App.vue中改变selected的值，如果颜色变了说明成功。
由于swiper的value在mount下只调用一次，所以需要在watch里进行监控，如果值变了就更新。

<template>
  <swiper v-model="selected" >
    <swiperItem name = "box1">
      <div class="content" style="background:red">页面1</div>
    </swiperItem>
    <swiperItem name = "box2">
      <div class="content" style="background:green">页面2</div>
    </swiperItem>
    <swiperItem name = "box3">
      <div class="content" style="background:yellow">页面3</div>
    </swiperItem>
  </swiper>
</template>
<script>
import swiperItem from './components/SwiperItem'
import swiper from './components/Swiper'
export default {
   	data:()=>{
       return {selected:'box3'}
    },
  	components: {
    	swiper,
    	swiperItem
  	},
  	mounted(){
      setTimeout(() => {
          this.selected='box1'
      }, 1000);
  }
};
</script>
<style lang="stylus">
.content
    width 300px
    height 300px
    text-align center
    margin auto
</style>

<template>
  <div class="swiper">
    <div class="viewport" >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        value:{
            type:String,
            default:''
        }
    },
    methods:{
        showChild(){
            let currentName = this.value||this.$children[0].name
            this.$children.forEach(vm => {
                vm.selected = currentName
            });
        }
    },
    watch:{
        value(){
            this.showChild()
        }
    },
    mounted(){
        this.showChild()
    }
}
</script>
<style lang="stylus">
.swiper
    border 5px solid black 
    width 300px
    height  300px
    margin auto
    text-align center
</style>

然后设置定时器用触发v-model的input来改变父组件的selected值。
在swiper里通过this.$children拿到列表项名字。
在列表项里用v-enter v-leave来设置动画。
vue的动画的离开和进入实际就是元素的离开和进入动画。这里需要元素移动，进入时候在swiper框右边一个身位，出来时候在swiper框左边一个身位。

<template>
  <transition>
    <div class="swiper-item" v-if="isShow">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return { selected: "" };
  },
  mounted() {},
  computed: {
    isShow() {
      return this.name === this.selected;
    }
  }
};
</script>
<style lang="stylus">
.v-enter-active,.v-leave-active
  transition all 1s linear 
  position absolute
.v-leave-to
  transform  translate(-100%)
.v-enter
  transform  translate(100%)
</style>

<template>
  <div class="swiper">
    <div class="viewport">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    autoplay:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    showChild() {
      this.currentName = this.value || this.$children[0].name;
      this.$children.forEach(vm => {
        vm.selected = this.currentName;
      });
    },
    autoShow(){
      if(this.autoplay){
      let timer = setInterval(() => {
        let index = this.names.indexOf(this.currentName)
        let newIndex = ++index
        if(newIndex===this.names.length){
          newIndex=0
        } 
        if(newIndex===-1)newIndex=this.names.length-1
        this.$emit('input',this.names[newIndex])
      },2000);
      }
    }
  },
  watch: {
    value() {
      this.showChild();
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },
  data(){
    return {currentName:''}
  },
  mounted() {
    this.names = this.$children.map((vm)=>vm.name)
    this.showChild();
    this.autoShow()
  }
};
</script>
<style lang="stylus">
.swiper 
  border 5px solid black
  width 300px
  height 300px
  margin auto
  text-align center
  overflow hidden
.viewport
  position relative
</style>

<template>
  <swiper v-model="selected" autoplay>
    <swiperItem name="box1">
      <div class="content" style="background:red">页面1</div>
    </swiperItem>
    <swiperItem name="box2">
      <div class="content" style="background:green">页面2</div>
    </swiperItem>
    <swiperItem name="box3">
      <div class="content" style="background:yellow">页面3</div>
    </swiperItem>
  </swiper>
</template>
<script>
import swiperItem from "./components/SwiperItem";
import swiper from "./components/Swiper";
export default {
  data: () => {
    return { selected: "box3" };
  },
  components: {
    swiper,
    swiperItem
  },
  mounted() {
  }
};
</script>
<style lang="stylus">
.content {
  width: 300px
  height: 300px
  text-align: center
  margin: auto
}
</style>

这样简易轮播图基本完成，下一篇再对这个进行优化。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

业火之理

@yehuozhili

已为社区贡献2条内容