小程序swiper实现icons分页显示

先上效果图：

HTML:

<view class='nav-main'>
    <view class='nav-block'>
      <swiper indicator-dots="true" indicator-active-color="rgba(0,175,190,.8)" style='height: 400rpx;'>
        <block wx:for="{{icons}}" wx:for-item="i">
          <swiper-item>
            <view class='nav-m'>
              <view class='nav' wx:for="{{i}}" wx:for-item="j">
                <image src="{{j.icon}}"></image>
                <text>{{j.title}}</text>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

CSS:

.nav-block{
  width:100%;
  font-size:28rpx;
  margin:20rpx auto;
  background: #fff
}
.nav-m{
  width:100%;
}
.nav{
  width:25%;
  margin:16rpx auto;
  text-align: center;
  display: inline-block;
  
}
.nav image{
  display:inline-block;
  width:48px;
  height:48px;

}
.nav text{
  display:block;
  font-size: 28rpx;
  color: #212121;
}

JS:

data: {
    icons: [
      [
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "景点门票" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png", title: "广州必游" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png", title: "动植物园" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png", title: "游乐场" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/89/55083b0f1951f302.png", title: "两江夜游" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png", title: "水上乐园" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png", title: "一日游" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/90/59a2f523ee2f9202.png", title: "农家度假" }
      ],
      [
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png", title: "玩转长隆" },
        { icon: "http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png", title: "全部玩乐" }
      ]
    ],
}