宫格 Grid

基础宫格布局，常见应用场景为微信支付页面。

宫格共包含 2 个组件： grid 、 grid-item ，这两个组件必须配合使用。

基本使用

grid 包裹在所有 grid-item 最外层， grid 下的所有 grid-item 属于同一个 grid;

grid-item 用于设置每一个宫格元素的内容及事件。

示例代码

<l-grid>
    <l-grid-item key="one" slot="one">
        <view class="num">3</view>
        <view class="text">助力</view>
     </l-grid-item>
    <l-grid-item key="two" slot="two">
        <view class="num">134</view>
        <view class="text">点赞</view>
    </l-grid-item>
    <l-grid-item key="three" slot="three">
        <view class="num">1648</view>
        <view class="text">评论</view>
    </l-grid-item>
</l-grid>

注意事项

• 必须在 grid-item 上设置 slot和 key,且两者值必须相等。因为在微信小程序中slot属性不能被获取到，所以必须设置一个和slot值一样的 key，以便于将子组件的元素插入到合适的位置。

设置边框

默认边框不显示，grid 提供了三个属性设置边框显示，这三个属性接收的值是布尔值，分别如下：

• show-border="true" 显示所有的边框；
• show-row-border="true" 显示横向边框；
• show-col-border="true" 显示纵向边框；

示例代码

<l-grid l-class-grid="grid-item" show-border="{{true}}">
    <l-grid-item 
      wx:for="{{grids1}}" wx:key="{{index}}" key="{{index}}" slot="{{index}}">
        <l-icon name="{{item.image}}" />
        <view class="text">{{item.text}}</view>
    </l-grid-item>
</l-grid>

设置每行数目

默认每行3个宫格，可以使用 row-num 自定义每行显示的宫格数目。

示例代码

<l-grid l-class-grid="grid-item" row-num="4" show-col-border="{{true}}">
    <l-grid-item 
      wx:for="{{grids2}}" wx:key="{{index}}" key="{{index}}" slot="{{index}}">
        <l-icon name="{{item.image}}" />
        <view class="text">{{item.text}}</view>
    </l-grid-item>
</l-grid>

宫格属性 (Grid Attributes）

宫格事件 (Grid Events）

宫格元素属性 (GridItem Attributes）

宫格元素事件 (GridItem Events）