微信小程序没有现成的table标签,该怎么布局呢?

<view class="my-grids">
<block wx:for="{{grids}}" wx:key="*this">
<view url="" class="my-grid" hover-class="my-grid_active">
<view class="my-grid__label">{{item}}</view>
</view>
</block>
</view>
.my-grids {border-top: 1rpx solid #d9d9d9;border-left: 1rpx solid #d9d9d9;overflow: hidden}
.my-grid {position: relative; display:inline-block; padding: 20px 10px;width: 25%;box-sizing: border-box;border-right: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9}
.my-grid_active {background-color: #ececec}
.my-grid__icon {display: block;width: 28px;height: 28px;margin: 0 auto}
.my-grid__label {margin-top:5px;display: block;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden}
Page({
data: {
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8,9,10,11,12,13,14,15]
}
});

微信小程序-表格形式如何布局?的更多相关文章

  1. 微信小程序:原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

  2. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  3. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  4. 微信小程序 - 非入侵式布局

    非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...

  5. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  6. 在微信小程序中学习flex布局

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...

  7. 学习微信小程序之css16常见布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  9. 微信小程序之Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. CodeBlocks调试功能快捷教程

    在程序设计中,单步调试能够跟踪程序的执行流程.跟踪过程中,还可以观察变量的变化,从而发现其中存在的问题.单步执行除了可以帮助我们发现设计的程序中存在的问题,对于初学者,还可以帮助我们理解语言的机制. ...

  2. [codeforces/edu5]总结(F)

    链接:http://codeforces.com/contest/616 A题: 统一成1e6长度的字符串,右对齐比较字典序. B题: 求所有行的最小值,里面最大的那个.暴力. C题: 先用dfs给每 ...

  3. HDU1542 扫描线+离散化

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  4. java removeAll和重写equals、hashcode引起的性能问题

    问题背景: 上周发现了一个spark job的执行时间从原来的10-15分钟延迟到了7个小时!wtf,这是出了什么事引起了这么大的性能问题!! 立马查看job的运行日志,发现多次运行都是在某一个固定的 ...

  5. jQuery中 $.extend 和 $.fn.extend 作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...

  6. JavaScript实现35选7并记录历史状态

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAABQCAYAAACnOs9vAAAJy0lEQVR4nO2dbWwUxxnH/2c5SElQSl ...

  7. 搜索:N皇后

    N皇后问题是DFS的代表性问题,其最难的地方就是在判重这里,想明白了怎么判重的话问题就很显然了. 这里给出两份代码,其中第一份代码的效率更好,就是在判重上下了功夫.当然,我记得还有使用位运算进行判重的 ...

  8. CentOS查看系统版本号

    命令:cat /etc/redhat-release [elsearch@localhost data]$ cat /etc/redhat-release Red Hat Enterprise Lin ...

  9. 利用forEach循环Dom元素…

    大家都知道forEach是循环数组用的,而且很方便,可以丢掉for循环了,但是它不能循环Dom元素.其实我们可以利用call来完成forEach循环Dom; 假设有这样的HTML结构: <ul ...

  10. 51nod 1106 质数检测——Mr判素数

    质数检测一般都是根号n的写法 当然Mr判素数的方法可以实现log的复杂度2333 Mr判素数的话 我们根据费马小定理只要P是素数 那么另一个素数x 满足 x^P-1≡1(mod P) 同时 x^2%P ...