当前位置:首页 > 网站技术 > 前端技术 > 正文内容

基于Vue自定义上下轮播组件(原创)

小彬2020-06-09前端技术273

当初拿到设计师设计的这个稿子,我也是花了好几天才写出来的这个轮播图

效率极低,特此发表纪念一下,万一以后能用的到呢。

效果:

鼠标移入圆点,移动下一张图片。

它也可以自动轮播。

重点是右侧我标注的红框,它是固定的,只有内容可以动

基于Vue自定义上下轮播组件(原创)


父组件:

<top-swiper :itemsArr="topSwiperList" :interval=3000></top-swiper>
data:{
topSwiperList:[
        { id: 1,
          name: '改造专区',
          imgUrl: 'https://www.zqins.com/public/mimages/20190109/201901091547018643_97876.jpg',
          content: '<p>空间电荷换肤大师发货地址从的做法表达式分<h4>改造专区</h4></p>'
        },
        { id: 2,
          name: '维修专区',
          imgUrl: 'https://www.zqins.com/public/mimages/20180614/201806141528955475_59295.jpg',
          content: '<p>空间电荷换肤大师发货地址从的做法表达式分<h4>维修专区</h4></p>'
        },
        { id: 3,
          name: '生产专区',
          imgUrl: 'https://www.zqins.com/public/mimages/20190823/201908231566543705_18991.jpg',
          content: '<p>空间电荷换肤大师发货地址从的做法表达式分<h4>生产专区</h4></p>'
        }
      ],
}


TopSwiper子组件:


<template>
  <div :style="{height:height+ 'px'}" 
       class="top-swiper"
       @mouseenter.stop="handleMouseEnter"
       @mouseleave.stop="handleMouseLeave">
    <img src="~/assets/img/picture/topswiper-div.png" alt="">
    <ul class="rollScreen_list top-swiper-ul" :style = {transform:transform}>
      <li v-for="(item,index) of itemsArr" :key=index :style="{height:height+'px'}">
        <div>
          <div>
            <i><img src="~/assets/img/picture/top-swiper-i.png" alt=""></i>
            <span>{{item.name}}</span>
          </div>
          <img :src="item.imgUrl" alt="">
        </div>
        <div>
            <div v-html="item.content"></div>
        </div>
      </li>
    </ul>
    <div class="top-swiper-indicator clearfloat">
      <span v-for="(item,index) in itemsArr" @mouseenter.stop="gotoPage(index)" :class="{'top-swiper-radius-active': num == index}" :key="item.id"></span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    itemsArr: {
      type: Array,
      default: null
    }, 
    height: {
      type: Number,
      default: 450
    }, 
    interval: {
      default: 2000,
      type: Number 
    }
  },
  data: function () {
    return {
      num: 0,
      hover: false,
      autoplay:true,
      setIntervalTimer:null
    }
  },
  computed: {
    transform: function () {
      return 'translateY(-' + this.num * this.height + 'px)'
    },
    nextIndex() {
      if(this.num == this.itemsArr.length - 1) {
        return 0;
      }else {
        return this.num + 1;
      }
    }
  },
  mounted() {
    if (this.autoplay) {
      this.startTimer()
    }
  },
  methods:{
    startTimer() {
      let _this = this
      if (_this.itemsArr !== null) {
        this.setIntervalTimer
      }
      this.setIntervalTimer= setInterval(()=> {
        this.gotoPage(this.nextIndex)
      }, this.interval)
    },
    handleMouseEnter() {
      this.hover = true
      clearInterval(this.setIntervalTimer)
    },
    handleMouseLeave() {
      this.hover = false
      if (this.autoplay) {
        this.startTimer()
      }
    },
    gotoPage(index) {
      this.num = index;
    }
  }
}
</script>
<style scoped>
 @import '~assets/css/varibles.styl'
.top-swiper
  display: inline-block;
  position:relative;
  overflow: hidden;
  margin 30px 0 42px 0
  width $conWidth
  height 450px
  position relative
  overflow hidden
  .rollScreen_list
    transition 1s linear
    padding 0
    margin 0
    list-style none
  .right-swiperImg
    position absolute
    z-index -1
    top 0
    right 0
  .top-swiper-ul
      width 100%
      .top-swiper-li
        position relative
        width 100%
        height 450px
        float left
        .top-swiper-left
          width 800px
          height 100%
          float left
          .top-swiper-span
            width 132px
            height 32px
            background linear-gradient(-70deg,rgba(85,95,255,1),rgba(128,44,255,1))
            border 1px solid rgba(255,255,255,0.8)
            border-radius 16px
            position absolute
            top 11px
            left 11px
            line-height 32px
            & span
              color #fff
            & i
              display inline-block
              float left
              margin 7px 13px 0px 15px
          .top-swiper-img
            width 800px
            height 450px
        .top-swiper-right
          width 385px
          float right
          height 100%
          position relative
          .top-swiper-content
            padding 40px 30px
  .top-swiper-indicator
    position absolute
    width 6px
    right 410px
    bottom 10px
    z-index 1
    background transparent
    .top-swiper-radius
      width 6px
      height 6px
      background #fff
      display inline-block
      margin 4px 0
      border-radius 3px
      cursor pointer 
    .top-swiper-radius-active
      width 6px
      height 18px
      background $bgColor
      display inline-block
      margin 4px 0
      border-radius 3px   
            
</style>


标签: ecmascript6vue
分享给朋友:

相关文章

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

实现iframe高度自适应的6种方法

实现iframe高度自适应的6种方法

iframe高度自适应JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS...

浏览器几种缓存方法的比较

浏览器几种缓存方法的比较

在Web应用领域,Web缓存大致可以分为以下几种类型:1.数据库数据缓存Web应用,特别是社交网络服务类型的应用,往往关系比较复杂,数据库表繁多,如果频繁进行数据库查询,很容易导致数据库不堪重荷。为了...

meta标签功能之兼容主流浏览器

meta标签功能之兼容主流浏览器

其实一般新手估计都不会注意这个问题,新手大多都会迫不及待的为了实现网页而去重视代码,往往忽视最重要的meta标签,我就是这样,我也是做了两年的前端才算发现这个里面有很大的学问我最近在一个人独自开发一个...

 前端入门html、css、js知识汇总(2)

前端入门html、css、js知识汇总(2)

68.ECMAScript{   简单数据类型:undefined,null,boolean,number,string   复杂数据类型:object...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信