<!--index.wxml-->

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:362rpx" bindchange="bindChange">

  <!-- 我是哈哈 -->

  <swiper-item>

    <view class="page__bd">

      <view class="weui-grids">

        <block wx:for-items="{{grids}}" wx:key="{{index}}">

          <view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{0}}" bindtap="click">

            <image class="weui-grid__icon" src="../../images/icon_tabbar.png" />

            <view class="weui-grid__label">{{'哈哈-' + index}}</view>

          </view>

        </block>

      </view>

    </view>

  </swiper-item>

  <!-- 我是呵呵 -->

  <swiper-item>

    <view class="page__bd">

      <view class="weui-grids">

        <block wx:for-items="{{grids}}" wx:key="{{index}}">

          <view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{1}}" bindtap="click">

            <image class="weui-grid__icon" src="../../images/icon_tabbar.png" />

            <view class="weui-grid__label">{{'呵呵-' + index}}</view>

          </view>

        </block>

      </view>

    </view>

  </swiper-item>

</swiper>

<view class="indicator">

  <block wx:for="{{swiperList}}">

    <view class="swiper_item" style="background-color:{{index == currentTab?'#04b00f':'#aaaaaa'}};"></view>

  </block>

</view>

//获取应用实例

var app = getApp()

Page({

  data: {

    currentTab: 0,

    grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],

    swiperList:[0, 1, 2, 3, 4]

  },

  onLoad: function () {

  },

  click: function (e) {

    console.log(e.currentTarget.dataset.id)

    console.log(e.currentTarget.dataset.index)

    wx.showToast({

      title: '第' + e.currentTarget.dataset.id + '栏' + '第' + e.currentTarget.dataset.index + '个',

      icon: 'success',

      duration: 1500

    })

  },

  /**

     * 滑动切换tab

     */

  bindChange: function (e) {

    console.log(e.detail.current)

    this.setData({ currentTab: e.detail.current });

  },

})

/**index.wxss**/

.swiper-box {

  display: block;

  height: 100%;

  width: 100%;

  overflow: hidden;

}

.swiper-box view {

  text-align: center;

}

.weui-grids {

  border-top: 1rpx solid #d9d9d9;

  border-left: 1rpx solid #d9d9d9;

  overflow: hidden;

}

.weui-grid {

  position: relative;

  float: left;

  padding: 20px 10px;

  width: 20%;

  box-sizing: border-box;

  /*border-right: 1rpx solid #D9D9D9;

  border-bottom: 1rpx solid #D9D9D9;*/

}

.weui-grid__icon {

  display: block;

  width: 28px;

  height: 28px;

  margin: 0 auto;

}

.weui-grid__label {

  margin-top: 5px;

  display: block;

  text-align: center;

  color: #000;

  font-size: 14px;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}

.indicator {

  width: 100%;

  height: 60rpx;

  display:flex;

  flex-direction:row;

  justify-content:center;

  align-items:center;

  background: #eee;

}

.swiper_item {

  margin: 15rpx 10rpx;

  position: relative;

  float: left;

  width: 30rpx;

  height: 30rpx;

  border-radius: 50%;

  background-color: #aaa;

}