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

在根目录下新建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>

轮播完成