Grid

grid 九宫格,功能类似于微信钱包界面中的九宫格,用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。实现这个布局主要就是用了 weui 中的 .weui-grid,这种布局在 mpvue中也是完全支持的,示例代码如下:

  1. <template>
  2. <divclass="page">
  3. <divclass="page__bd">
  4. <divclass="weui-grids">
  5. <blockv-for="item in grids" :key="index">
  6. <navigatorurl=""class="weui-grid"hover-class="weui-grid_active">
  7. <imageclass="weui-grid__icon" :src="item.src"/>
  8. <divclass="weui-grid__label">{{item.name}}</div>
  9. </navigator>
  10. </block>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. import base64 from '../../../static/images/base64';
  17. exportdefault{
  18. data(){
  19. return{
  20. grids:[
  21. { src:'../../../static/images/icon_nav_button.png', name:'Button'},
  22. { src:'../../../static/images/icon_nav_cell.png', name:'Cell'},
  23. { src:'../../../static/images/icon_nav_toast.png', name:'Toast'},
  24. { src:'../../../static/images/icon_nav_dialog.png', name:'Dialog'},
  25. { src:'../../../static/images/icon_nav_button.png', name:'Progress'},
  26. { src:'../../../static/images/icon_nav_panel.png', name:'Msg'},
  27. { src:'../../../static/images/icon_nav_article.png', name:'Article'},
  28. { src:'../../../static/images/icon_nav_actionSheet.png', name:'ActionSheet'},
  29. { src:'../../../static/images/icon_nav_icons.png', name:'Icons'}
  30. ]
  31. }
  32. },
  33. methods:{
  34. }
  35. }
  36. </script>
  37. <style>
  38. page {
  39. margin-top:50px;
  40. }
  41. </style>

效果

grid01