微信小程序-自定义组件

自定义一个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"
 }

示例代码如下：点击获取