Grid 宫格

    示例

    2.     <view class="page__hd">
    3.         <view class="page__title">Grid</view>
    4.         <view class="page__desc">宫格</view>
    5.     </view>
    6.     <view class="page__bd">
    7.         <view class="sub-title">Default</view>
    8.         <wux-grids>
    9.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    10.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    11.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    12.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    13.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    14.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    15.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    16.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    17.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    18.         </wux-grids>
    19.         <view class="sub-title">Square = true</view>
    20.         <wux-grids square>
    21.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    22.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    23.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    24.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    25.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    26.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    27.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    28.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    29.         </wux-grids>
    30.         <view class="sub-title">Bordered = false</view>
    31.         <wux-grids bordered="{{ false }}">
    32.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    33.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    35.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    36.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    37.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    38.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    39.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    40.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    41.         </wux-grids>
    42.         <view class="sub-title">Col = 4</view>
    43.         <wux-grids col="4">
    44.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    45.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    46.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    47.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    48.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    49.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    50.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    51.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    52.         </wux-grids>
    53.         <view class="sub-title">Custom content</view>
    54.         <wux-grids>
    55.             <wux-grid>
    56.                 <wux-icon type="logo-github" />
    57.                 <view>Wux Weapp</view>
    58.             </wux-grid>
    59.                 <wux-icon type="logo-github" />
    60.                 <view>Wux Weapp</view>
    61.             </wux-grid>
    62.             <wux-grid>
    63.                 <wux-icon type="logo-github" />
    64.                 <view>Wux Weapp</view>
    65.             </wux-grid>
    66.             <wux-grid>
    68.                 <view>Wux Weapp</view>
    69.             </wux-grid>
    70.             <wux-grid>
    71.                 <wux-icon type="logo-github" />
    72.                 <view>Wux Weapp</view>
    73.             </wux-grid>
    74.             <wux-grid>
    75.                 <wux-icon type="logo-github" />
    76.                 <view>Wux Weapp</view>
    77.             </wux-grid>
    78.             <wux-grid>
    79.                 <wux-icon type="logo-github" />
    80.                 <view>Wux Weapp</view>
    81.             </wux-grid>
    82.             <wux-grid>
    83.                 <wux-icon type="logo-github" />
    84.                 <view>Wux Weapp</view>
    85.             </wux-grid>
    86.             <wux-grid>
    87.                 <wux-icon type="logo-github" />
    88.                 <view>Wux Weapp</view>
    89.             </wux-grid>
    90.         </wux-grids>
    91.     </view>
    92. </view>

    Grids externalClasses

    Grid slot