欢迎光临
我的个人博客网站

基于2个元素的纵向轮播

在开发过程中,我们经常会遇到纵向轮播,但是感觉网上的插件不是很好用,遂自己写了一个轮播,代码如下(基于vuejs):

//swiper.vue

<template>   <div class="layer" :style="{ height: height + 'px', width: width + 'px' }">     <template v-if="list.length == 0">       <div class="content">暂无数据</div>     </template>     <template v-if="list.length == 1">       <div class="content">{{ list[0] }}</div>     </template>     <template v-if="list.length > 1">       <div class="content">{{ list[0] }}</div>       <div class="content">{{ list[1] }}</div>     </template>   </div> </template> <script> export default {   name: "swiper",   data() {     return {       timer: null     };   },   props: {     list: {       type: Array,       default: () => {}     },
timespace:{
type: Number,
default: 3000
}, height: { default: 30, type: Number }, width: { default: 300, type: Number } }, watch: { list: { immediate: true, handler: function(nv, ov) { if (nv.length > 1) { this.$nextTick(() => { this.multiples(1); }); } } } }, methods: { multiples(d) { let dom = document.getElementsByClassName("content")[0]; let layer = document.getElementsByClassName("layer")[0]; let deg = 0; let index = d; if (this.timer) { clearInterval(this.timer); this.timer = null; } this.timer = setInterval(() => { deg = this.height; index++; dom.style.marginTop = `${-deg}px`; setTimeout(() => { let newdom = dom.cloneNode(true); layer.removeChild(dom); newdom.style.marginTop = `0px`; let textindex = index % this.list.length; newdom.innerHTML = this.list[textindex]; layer.appendChild(newdom); dom = document.getElementsByClassName("content")[0]; if (index == this.list.length) { clearInterval(this.timer); this.multiples(0); return false } }, 300); }, this.timespace); } } }; </script> <style scoped> .layer { width: 300px; height: 30px; background: rgba(0, 0, 0, 0.1); box-sizing: border-box; overflow: hidden; } .content { height: 100%; line-height: 30px; transition: all 0.2s linear; } </style>

  原理: 类似于人走路一样,只需要两只脚,便可行万里路,生成一个元素,当隐藏掉的时候,删除这个元素,后续再新增元素来补位

父组件:

... <swiper :list="list"></swiper> .... data(){   return {     list: ["第一个元素","第二个元素","第3个元素","第4个元素"]   } } 

 效果(已加速3倍):

基于2个元素的纵向轮播

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 基于2个元素的纵向轮播
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏