菜鸟看前端（微信小程序自定义组件封装-轮播图的封装）

在根目录下新建components文件夹

tip:所有文件都可以自定义名字

在components文件夹下新建swiper文件夹,在文件夹内新建component

新建完成后

1. 在swiper.wxml中写入

<swiper indicator-dots='true' 
        indicator-active-color='#ff5777'
        autoplay='true'
        circular='true'
        interval='3000'
        class='swiper'>
  <block wx:for="{{images}}" wx:key="index">
    <swiper-item>
      <image class="swiper-image" src="{{item.image}}"/>
    </swiper-item>
  </block>
</swiper>

2. 在swiper.js中写入

// components/w-swiper/w-swiper.js
Component({
  /**
   * 组件的属性列表
   */
   // 用来接收传入自定组件的数据
  properties: {
    images:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

3. 在swiper.wxss中写入

.swiper {
  height: 360rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

4. 在swiper.json中写入

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

5. 在父组件中json引入

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "drl-swiper":"../../components/swiper/swiper"
  }
}

6. 父组件js中调用轮播图片

let app = getApp()
Page({

/**
 * 页面的初始数据
 */
data: {
  imgList:[]
},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  app.http.banner().then(res=>{
    console.log(res)
    let {list} = res.data.data.banner
    this.setData({
      imgList:list
    })
  })
},
.....
}

7. 父组件的wxml中使用注册的组件,把轮播图片传递给自定义组件

<drl-swiper images="{{imgList}}"></drl-swiper>

轮播完成