微信小程序-九宫格gridView封装实现

大家好，刚开始玩微信小程序，实现了个九宫格gridView小封装，记录自己的学习历程，同时分享给大家希望带给大家一点方便。无入侵可以全局引用使用哦。
	扫一扫看是不是你想要的效果

组件部分代码：

wxml文件

<view class='grid-item-container'>
  <block wx:for="{{itemDatas}}" wx:key="index">
    <view class='grid-item-child' bindtap='clickItem' data-text="{{index}}">
      <view>
        <image class="grid-item-image" src="{{item.src}}" mode='widthFix'/>
        <text class='grid-item-label'>{{item.title}}</text>
      </view>
    </view>
  </block>
</view>

css样式

在这里插入代码片

/*
九宫格容器布局样式
*/
.grid-item-container {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
border-top: 1rpx solid #D9D9D9;
}

/*
item容器样式
*/
.grid-item-child {
display:flex;
display: -webkit-flex;
justify-content:center;
flex-direction: column;
flex-wrap: wrap;
float: left;
width: 33.33333333%;
height: 200rpx;
box-sizing: border-box;
background-color: #FFFFFF;
border-right: 1rpx solid #D9D9D9;
border-bottom: 1rpx solid #D9D9D9;
}

/*
icon样式
*/
.grid-item-image {
width: 40%;
display:flex;
display: -webkit-flex;
margin-left: 30%;
margin-top: 5rdx;
justify-content:center;
}

/*
文本样式
*/
.grid-item-label {
display:flex;
display: -webkit-flex;
justify-content:center;
color: #666;
font-size: 14px;
}

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    itemDatas: {
      type: Array
    }
  },

   /**
   * 页面数据源
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //itemt 点击
    clickItem(e){
      
         // 将最传递到页面
       this.triggerEvent('itemClick', {index:e.currentTarget.dataset.text}, {})
    }
  }
})

外部使用

<w-grid itemDatas="{{itemDatas}}" bind:itemClick="itemClick"></w-grid>

调用js文件

// pages/other.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   
  },

  /**
   * 组件的初始数据
   */
  data: {
    itemDatas: [
       { src:"图标",
        url:"跳转页面"  
   }
  ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    itemClick(e){
      console.log(e.detail.index)
        //跳转 订阅列表页面
        wx.navigateTo({
          url: this.data.itemDatas[e.detail.index]["url"]
        })
    }
  }
})

结束，欢迎转载，欢迎大家评论区多提意见，觉得有帮助的可以关注支持我。