【微信小程序】好看的轮播图组件

微信小程序好看的轮播图组件效果示例

使用步骤

第一步：

新建components文件夹

第二步：

按照以下目录创建文件：（文件名可以自定义，但后面引入组件时应保持前后一致）

第三步：

各个文件的代码：

customSwiper.js：

// components/customSwiper.js
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    imgUrls: Array,
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
   
    swiperChange(e) {
   
      this.setData({
   
        currentIndex: e.detail.current
      });
    }
  }
})

customSwiper.json：

{
   
  "component": true,
  "usingComponents": {
   }
}

customSwiper.wxml：

<!--components/customSwiper.wxml-->
<swiper indicator-dots="false" 
        autoplay="{
    {true}}" 
        interval="5000" 
        indicator-dots