微信小程序自定义swiper组件

1.实现效果

在这里插入图片描述

2.组件介绍

在这里插入图片描述

3.部分代码

// components/swiper/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgUrls:{
      type:Array,
      value:''
    },
    autoplay:{
      type:Boolean,
      value:false
    },
    interval:{
      type:String,
      value:5000,
    },
    show_dots:{
      type:Boolean,
      value:false
    },
    dot_color:{
      type:String,
      value:'#ccc'
    },
    dot_active_color:{
      type:String,
      value:'#000'
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
    swiperChange(e) {
      if (e.detail.source == "touch" || e.detail.source == "autoplay") {
        this.setData({
          currentIndex: e.detail.current
        });
        this.triggerEvent('change',this.data.currentIndex);
      }
    }

  }
})

4.完整代码

https://gitee.com/susuhhhhhh/components

5.更多小程序案例

https://gitee.com/susuhhhhhh/wxmini_demo