Grid 宫格

    示例

    1. <view class="page__hd">
    2. <view class="page__title">Grid</view>
    3. <view class="page__desc">宫格</view>
    4. </view>
    5. <view class="page__bd">
    6. <view class="sub-title">Default</view>
    7. <wux-grids>
    8. <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    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-grids>
    18. <view class="sub-title">Square = true</view>
    19. <wux-grids square>
    20. <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    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-grids>
    29. <view class="sub-title">Bordered = false</view>
    30. <wux-grids bordered="{{ false }}">
    31. <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    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" />
    34. <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-grids>
    40. <view class="sub-title">Col = 4</view>
    41. <wux-grids col="4">
    42. <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    43. <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
    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-grids>
    51. <view class="sub-title">Custom content</view>
    52. <wux-grids>
    53. <wux-grid>
    54. <wux-icon type="logo-github" />
    55. <view>Wux Weapp</view>
    56. </wux-grid>
    57. <wux-icon type="logo-github" />
    58. <view>Wux Weapp</view>
    59. </wux-grid>
    60. <wux-grid>
    61. <wux-icon type="logo-github" />
    62. <view>Wux Weapp</view>
    63. </wux-grid>
    64. <wux-grid>
    65. <view>Wux Weapp</view>
    66. </wux-grid>
    67. <wux-grid>
    68. <wux-icon type="logo-github" />
    69. <view>Wux Weapp</view>
    70. </wux-grid>
    71. <wux-grid>
    72. <wux-icon type="logo-github" />
    73. <view>Wux Weapp</view>
    74. </wux-grid>
    75. <wux-grid>
    76. <wux-icon type="logo-github" />
    77. <view>Wux Weapp</view>
    78. </wux-grid>
    79. <wux-grid>
    80. <wux-icon type="logo-github" />
    81. <view>Wux Weapp</view>
    82. </wux-grid>
    83. <wux-grid>
    84. <wux-icon type="logo-github" />
    85. <view>Wux Weapp</view>
    86. </wux-grid>
    87. </wux-grids>
    88. </view>
    89. </view>

    Grids externalClasses

    Grid slot