小程序轮播图添加页码，以及封装的component轮播图

位置不要放错了在swiper-item里面

<view class='rLInedx'>{{index + 1}}/{{top_banner.length}}</view>

.rLInedx{
  color: black;
  position: fixed;
  right: 20rpx;
  bottom: 20rpx;
  font-size: 30rpx;
}

二、封装的组件

1.新建components，以及banner组件

<view class='banners'>
  <swiper interval="2000" autoplay="true" circular="true" duration='500' bindchange='bannerChange'>
    <block wx:for="{{banner}}" wx:key="id">
      <swiper-item class="banner-item">
        <image mode='aspectFill' src="{{item.BImgFull}}"></image>
      </swiper-item>
    </block>
  </swiper>

  <!-- 标记点 -->
  <view class='dots'>
    <block wx:for="{{banner.length}}" wx:key="index">
      <view class="dot {{index===swiperCurrent ? 'active':''}}"></view>
    </block>
  </view>
</view>

properties: {
    banner:{
      type:null,
      value:''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    swiperCurrent:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bannerChange: function (e) {
      this.setData({
        swiperCurrent: e.detail.current
      })
    },
  }

.banners {
  position: relative;
  height: 360rpx;
}

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

.dots {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  bottom: 0;
  left: 0;
}

.dot {
  margin: 20rpx 10rpx;
  width: 50rpx;
  height: 6rpx;
  background: #ddd;
  /* transition: all 0.6s; */
}

.dot.active {
  background: #8ca0ff;
}

index.wxml

    <banner banner="{{banner}}"></banner>

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh":true,
  "usingComponents": {
    "banner":"../../components/banner/index"
  }
}