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

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

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

实现思路：

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

流程：

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

2.调整样式

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

4.over、大致效果：

具体代码：

wxml:

    
      
        
          
              
                  
                      
                      Grid
                  
              
          
        
      
    

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:
   
      
        
          
            
              
                  
                  {{ item.name }}
                                            
            
          
        
      
    


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,
    })
  },