技術標籤：小程式小程式

在根目錄下建立一個compontents目錄，用來存放所有元件。

比如說我們建立一個w-swiper元件，在components目錄下建立w-swiper目錄。自定義元件類似於頁面，一個自定義元件由 json wxml wxss js 4個檔案組成。

w-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>

w-swiper.wxss

.swiper {
  height: 430rpx;
 

}

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

w-swiper.js

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    images:{
      type:Array,
      value:[]
    }
  },
  /**
   * 元件的初始資料
   */
  data: {

  },
  /**
   * 元件的方法列表
   */
  methods: {

  }
})

w-swiper.json

{
  "component": true,
 

  "usingComponents": {}
}

在父元件demo中
demo.js

// pages/cate/cate.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
     topImages: [],
  },
 /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    let that=this;
    
      wx.request({
        url: 'http://test.com/api/list', //僅為示例，並非真實的介面地址
        data: {

        },
        method:'get',
        header: {
          'content-type': 'application/json' // 預設值
        },
        success (res) {
          console.log(res.data.data.banner.list)
          that.setData({topImages:res.data.data.banner.list})
        }
      })
      
  },

demo.json

{
  "usingComponents": {
    "w-swiper":"/components/w-swiper/w-swiper"
  },
  "navigationBarTitleText": "輪播"
}

demo.wxml

<w-swiper images='{{topImages}}'></w-swiper>