微信小程序-自定义组件

自定义一个swiper轮播.

 

index

index.wxml

<!--logs.wxml-->
 <swiperBanner Height="450rpx" imgList="{{banners}}" url="picUrl"></swiperBanner>

 

components文件夹中的swiper_banner/index

index.json

导入路径为上两层的components文件夹中的swiper_banner/index

components/swiper_banner/index.js

Component({
  properties: {
    imgList: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        this.setData({
          imgList: newVal
        })
      }
    },
    url:{
      type:String,
      value:''
    },
16     Height:{
17       type:String,
18       value:''
19     },
    Width:{
      type:String,
      value:''
    }
  }
})

components/swiper_banner/index.json

{
  "component": true
}

components/swiper_banner/index.wxml

<view class='swiper'>
  <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style="height:{{Height}};">
    <block wx:for="{{imgList}}" wx:key="prototype">
      <swiper-item>
        <image src="{{item[url]}}" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>
</view>

components/swiper_banner/index.wxss

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

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#FB5D5D",
  "onReachBottomDistance": 10,
5   "usingComponents": {
6     "swiperBanner": "../../components/swiper_banner/index"
7   },
  "navigationBarTitleText": "log"
}

 

 

示例代码如下：点击获取