微信小程序-轮播组件+九宫格

微信小程序-轮播组件+九宫格

目的效果图：（饿了么界面）

实现思路：

swiper组件+九宫格（容器包裹 图片+文字）+数据绑定、实现跳转

流程：

1.先写出轮播框架、框架里面放九宫格

2.调整样式

3.初步工作完成，接下来写入数据

4.over、大致效果：

具体代码：

wxml:

    <view class="swiper-grids">
      <swiper class="grids-box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
        <swiper-item class="grids-item" wx:for="{{ group }}">
          <view class="weui-grids">
              <block wx:for="{{grids}}" wx:key="*this">
                  <navigator url="" class="weui-grid" hover-class="weui-grid_active">
                      <image class="weui-grid__icon" src="/images/icon/icon_search.png" />
                      <view class="weui-grid__label">Grid</view>
                  </navigator>
              </block>
          </view>
        </swiper-item>
      </swiper>
    </view>

wxss:

@import '../tpls/dialog/dialog-tpl.wxss'; //应用微信小程序官方的样式库weui
/* 九宫格 */
.swiper-grids{
  background-color: #eee;
}

.grids-box{
  padding: 0rpx 10rpx;
}

.weui-grids{
  height: 300rpx;
  border: none;
  background: #fff;
}

.weui-grid{
  width: 25%;
  height: 50%;
  border: none;
}

.weui-grid__icon{
  border-radius: 28rpx;
  width: 60rpx;
  height: 60rpx;  
}

.weui-grid__label{
  margin-top: 0rpx;
  color: #666;
}

js:

按实际需求再去处理就行了

  data: {
    // 轮播图部分
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
    indicatorColor: '#ff7440', 
    indicatorActiveColor: '#000000',
    //九宫格部分
    grids: [0, 1, 2, 3, 4, 5, 6, 7],
    group: [0, 1]
  },

前面只能做出样式，功能并未实现！！！

提几点特别需要注意的内容，
swiper-item下不能用navigator,跳转不了,
data-绑定的值也和常规不一样，踩了好久的坑，特意再次说明一下。

解决方法：
直接上代码

wxml:
   <view class="swiper-grids">
      <swiper class="grids-box" indicator-dots="{{indicatorDots}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
        <swiper-item class="grids-item" wx:for="{{ group }}" wx:key="id">
          <view class="weui-grids">
            <block wx:for="{{ category }}" wx:key="id">
              <view class="weui-grid" bindtap="toGridDetail" data-idex="{{ item.id }}">
                  <image class="weui-grid__icon" src="{{ item.topic_img_url }}" />
                  <view class="weui-grid__label">{{ item.name }}</view>
              </view>                              
            </block>
          </view>
        </swiper-item>
      </swiper>
    </view>


JS：
//banner跳转，常規的跳轉
  toShopDetail: function (event) {
    let id = index.getDataSet(event, 'id');
    wx.navigateTo({
      url: '../shop/shop?id=' + id,
    })
  },					

  //grid跳转
  toGridDetail: function (event) {
    let index = event.currentTarget.dataset.idex;
    wx.navigateTo({
      url: '../category/category?index=' + index,
    })
  },