微信小程序块导航

1.wxml页面

<!--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>

2.js页面

//获取应用实例  
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 });
  },
})

3.样式wxss页面

/**index.wxss**/

.swiper-box {
  display: block;
  height: 100%;
   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;
   20%;
  box-sizing: border-box;
  /*border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;*/
}

.weui-grid__icon {
  display: block;
   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 {
   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;
   30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #aaa;
}