开发小程序轮播图组件-简易

关于小程序轮播图组件

组件开发

在components中创建一个目录customSwiper在此目录下创建一个组件
wxml

<!-- 轮播图组件  -->
<view class='swiper'>
  <swiper  autoplay="true" interval="5000" duration="1000" style="height:{{Height}};width:{{Width}};">
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>

  <button bindtap='m'></button>
</view>

json

{
  "component": true
}

js

Component({
  // 私有数据
  data: {

  },

  // 方法
  methods: {
    m() {

      // console.log('触发了!');
    }
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  lifetimes: {
    attached: function() {
      console.log('attached');
    },
    moved: function() {},
    detached: function() {},
  },

  // 组件所在页面的生命周期函数
  pageLifetimes: {
    show: function() {
      console.log('生命show!');
    },
  },

  // 变量替换以及修改
  properties: {
  //轮播图图片参数
    imgUrls: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        this.setData({
          imgList: newVal
        })
      }
    },  
    //轮播图高度参数
    Height: String,
    //轮播图宽度参数
    Width:String
  }
})

页面使用

在页面json中

{
  "usingComponents": {
    "custom-swiper": "../../components/customSwiper/customSwiper"
  }
}

在页面中

 <!-- 轮播图 -->
  <!-- imgUrls， Height，Width都是组件中prop的参数-->
  <custom-swiper imgUrls="{{自己获取的轮播图数据}}" Height="400rpx" Width="700rpx" />