Vue项目自定义轮播图基础组件

最新推荐文章于 2024-08-19 14:54:14 发布

okboy519

最新推荐文章于 2024-08-19 14:54:14 发布

阅读量1.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/okboy519/article/details/104909325

版权

这篇博客记录了在Vue项目中自定义轮播图组件的过程，包括创建slider.vue组件，理解轮播图基本原理，如自动轮播、循环播放和播放时长等关键功能。博主分享了在recommend.vue组件中使用自定义轮播图的方法，并提到利用better-scroll插件进行轮播控制，详细介绍了JS部分的实现代码。

摘要由CSDN通过智能技术生成

Vue项目自定义轮播图基础组件

因为不会封装所以学习一下，记录一下

1.先创建一个slider.vue组件，这个是写好的文件

<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot></slot>
    </div>
    <div class="dots"></div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import {addClass} from 'common/js/dom.js'
export default {
  name: "slider",
  components: {},
  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 4000
    }
  },
  data() {
    return {};
  },
  mounted() {
    setTimeout(() => {
        this._setSliderWidth()
        this._initSlider()
    }, 20);
  },
  methods:{
      //设置slider宽度
      _setSliderWidth(){
          //获取sliderGroup的children个数  https://www.runoob.com/jsref/prop-element-children.html
          this.children = this.$refs.sliderGroup.children

          let width = 0 
          //获取slider父容器轮播宽度https://www.softwhy.com/article-9001-1.html
          let sliderWidth = this.$refs.slider.clientWidth
          for(let i=0;i<this.children.length;i++){
              let child = this.children[i]
              addClass(child,'slider-item')
              child.style.width = sliderWidth + 'px'
              width +=sliderWidth
          }
          if(this.loop){
              width+=2*sliderWidth
          }
          this.$refs.sliderGroup.style.width = width +'px'
      },    
      //初始化slider
      _initSlider(){
          this.slider = new BScroll(this.$refs.slider,{
              scrollX:true,
              scrollY:false,
              momentum:false,
              snap:true,
              snapLoop:this.loop,
              snapThreshold:0.3,
              snapSpeed:400,
              click:true
          })
      }
  }
};
</script>
<style lang=stylus scoped>
@import '~common/stylus/variable';

.slider {
  min-height: 1px;

  .slider-group {
    position: relative;
    overflow: hidden;
    white-space: nowrap;

    .slider-item {
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;

      a {
        display: block;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
      }

      img {
        display: block;
        width: 100%;
      }
    }
  }

  .dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 12px;
    text-align: center;
    font-size: 0;

    .dot {
      display: inline-block;
      margin: 0 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: $color-text-l;

      &.active {