微信小程序UI之旅：自定义轮播图组件

轮播图展示

image.png

github传送门：https://github.com/albert-lii/wx-abui/tree/master/abui/widgets/ab-banner
demo传送门：https://github.com/albert-lii/wx-abui/tree/master/pages/mainex

自定义属性和方法

属性	描述
src	数据源
current-title	当前页面标题
interval	页面切换间隔时间
duration	页面滑动动画时长
placeholder	图片未加载完成时的占位图
error	图片加载失败时的占位图

方法	描述
bindchange	页面切换监听
binditemtap	页面点击监听

使用示例

<view class="container">
     <ab-banner class="banner" src="{{bannerList}}" current-title="{{bannerTitle}}" bindchange="bannerChanged" binditemtap="bannerItemTap" />
</view>

.banner {
  width: 100%;
  height: 362rpx;
}

Page({

  data: {
    bannerList: [{
      title: '测试1',
      imgUrl: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/469/picture4.jpg'
    },
    {
      title: '测试2',
      imgUrl: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/4626/25.jpg'
    },
    {
      title: '测试3',
      imgUrl: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/469/picture4.jpg'
    }
    ],
    bannerTitle: '测试1'
  },

  /**
   * banner 页面切换监听
   */
  bannerChanged: function (e) {
    let _current = e.detail.current;
    this.setData({
      bannerTitle: this.data.bannerList[_current].title
    });
  },
  /**
   * banner item 点击监听
   */
  bannerItemTap: function (e) {
    wx.showToast({
      icon: 'none',
      title: '点击了第' + e.detail.dataset.index + '个页面',
      duration: 1000
    })
  }
});

{
  "navigationBarTitleText": "abui",
  "usingComponents": {
    "ab-banner": "../../abui/widgets/ab-banner/ab-banner"
  }
}

源码

注：轮播图组件中引用了ab-easy-image组件，使用时请至 wx-abui 项目中将ab-easy-image一起拷贝下来，或者直接将ab-easy-image改为普通的image组件，则placeholder与error属性不可用。

• ab-banner.wxml

<view class="banner">
  <swiper class="banner-slider" indicator-dots="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgba(255, 255, 255,.8)" autoplay="true" circular="true" interval="{{interval}}" duration="{{duration}}" bindchange="_itemChanged">
    <swiper-item wx:for="{{src}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}" bindtap="_itemTap" data-index="{{index}}" data-item="{{item}}">
      <ab-easy-image class="banner-item-image" src="{{item.imgUrl}}" placeholder="{{placeholder}}" error="{{error}}" mode="aspectFill" />
    </swiper-item>
  </swiper>
  <text class="banner-item-title" wx:if="{{currentTitle}}">{{currentTitle}}</text>
</view>

• ab-banner.wxss

.banner {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slider {
  width: 100%;
  height: 100%;
}

.banner-item-image {
  width: 100%;
  height: 100%;
}

.banner-item-title {
  position: absolute;
  font-size: 20rpx;
  color: white;
  line-height: 20rpx;
  right: 20rpx;
  bottom: 20rpx;
}

• ab-banner.js

Component({
  properties: {
    // banner 数据源
    src: {
      type: Array,
      value: null
    },
    // 当前页面的标题
    currentTitle: {
      type: String,
      value: ''
    },
    // 页面切换间隔时间
    interval: {
      type: Number,
      value: 5000
    },
    // 页面滑动动画时长
    duration: {
      type: Number,
      value: 500
    },
    // 图片未加载完成时的占位图
    placeholder: {
      type: String,
      value: ''
    },
    // 图片加载失败时的占位图
    error: {
      type: String,
      value: ''
    },
  },

  methods: {
    /**
     * 页面切换监听
     */
    _itemChanged: function(e) {
      let _current = e.detail.current;
      this.triggerEvent('change', {
        current: _current
      });
    },
    /**
     * banner item 点击事件
     */
    _itemTap: function(e) {
      console.log(e)
      let _currentTarget = e.currentTarget;
      this.triggerEvent('itemtap', _currentTarget);
    }
  }
})

• ab-banner.json

{
  "component": true,
  "usingComponents": {
    "ab-easy-image": "../ab-easy-image/ab-easy-image"
  }
}