<wxs
  src="./index.wxs"
  module="sjs"
></wxs>
<view
  wx:if="{{mode === 'default'}}"
  class="ant-grid ant-grid-columns-{{columns}} ant-grid-{{mode}} {{className || ''}}"
  style="{{style || ''}}"
>
  <block
    wx:for="{{items}}"
    wx:for-index="index"
    wx:for-item="item"
    wx:key="title"
  >
    <view
      data-item="{{item}}"
      class="ant-grid-item ant-grid-item-{{gridItemLayout}} {{sjs.checkNeedVerticalSpace(items.length, index, columns) ? 'ant-grid-item-vertical-' : ''}} ant-grid-item-columns-{{columns}} {{sjs.checkShowSplitLine(index, items.length, columns, mode, showDivider) ? 'ant-grid-item-line' : ''}}"
      bindtap="onTap"
      onFirstAppear="onFirstAppear"
    >
      <view class="ant-grid-item-icon ant-grid-item-icon-{{item.iconStyle || iconStyle}}">
        <image-icon
          image="{{item.icon}}"
          className="ant-grid-item-icon"
          style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
        ></image-icon>
      </view>
      <view class="ant-grid-item-info">
        <view class="ant-grid-item-title">{{item.title}}</view>
        <view class="ant-grid-item-description">{{item.description}}</view>
      </view>
    </view>
  </block>
</view>
<ant-pagination
  wx:elif="{{mode === 'scroll'}}"
  fillColor="{{paginationFillColor}}"
  frontColor="{{paginationFrontColor}}"
  className="{{className || ''}}"
  style="{{style || ''}}"
>
  <view class="ant-grid ant-grid-{{mode}}">
    <block
      wx:for="{{items}}"
      wx:for-index="index"
      wx:for-item="item"
      wx:key="title"
    >
      <view
        data-item="{{item}}"
        class="ant-grid-item ant-grid-item-{{gridItemLayout}} ant-grid-item-columns-scroll {{sjs.checkShowSplitLine(index, items.length, columns, mode, showDivider) ? 'ant-grid-item-line' : ''}}"
        bindtap="onTap"
        onFirstAppear="onFirstAppear"
      >
        <view class="ant-grid-item-icon ant-grid-item-icon-{{item.iconStyle || iconStyle}}">
          <image-icon
            image="{{item.icon}}"
            className="ant-grid-item-icon"
            style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
          ></image-icon>
        </view>
        <view class="ant-grid-item-info">
          <view class="ant-grid-item-title">{{item.title}}</view>
          <view class="ant-grid-item-description">{{item.description}}</view>
        </view>
      </view>
    </block>
  </view>
</ant-pagination>