微信小程序没有现成的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. Hive架构及应用介绍【链接】

    原文链接:https://blog.csdn.net/a2011480169/article/details/51482799

  2. Spring源码解析-JdbcTemplate

    JdbcTemplate类图 从类继承关系上来看,JdbcTemplate继承了基类JdbcAccessor和接口类JdbcOperation,在基类JdbcAccessor的设计中,对DataSou ...

  3. hadoop配置文件详解、安装及相关操作

    一.      Hadoop伪分布配置 1. 在conf/hadoop-env.sh文件中增加:export JAVA_HOME=/home/Java/jdk1.6            2.  在c ...

  4. 开发系统级应用不被Kill

    一.设置方法 (1) 在AndroidManifest中application根节点下,添加如下代码: android:persistent="true" (2) 将应用程序pus ...

  5. 手脱ASProtect v1.2(无Stolen Code)

    1.载入PEID ASProtect v1.2 2.载入OD > 01C04200 push 跑跑赛道.0042C001 ; //入口处 C3 retn AA stos byte ptr es: ...

  6. C#中excel读取和写入

    1.方法一:采用OleDB读取EXCEL文件: 把EXCEL文件当做一个数据源来进行数据的读取操作,实例如下: public DataSet ExcelToDS(string Path) { stri ...

  7. UVA 1363 Joseph's Problem

    https://vjudge.net/problem/UVA-1363 n 题意:求 Σ  k%i i=1 除法分块 如果 k/i==k/(i+1)=p 那么 k%(i+1)=k-(i+1)*p= k ...

  8. UVA 1262 Password

    https://vjudge.net/problem/UVA-1262 字典序第k小 注意两点: 1. k-- 2.去重 #include<cstring> #include<cst ...

  9. codevs 1332 上白泽慧音

    1332 上白泽慧音  时间限制: 1 s  空间限制: 128000 KB     题目描述 Description 在幻想乡,上白泽慧音是以知识渊博闻名的老师.春雪异变导致人间之里的很多道路都被大 ...

  10. 「模板」 01 Trie实现平衡树功能

    不想多说什么了.费空间,也不算太快,唯一的好处就是好写吧. #include <cstdio> #include <cstring> const int MAXN=100010 ...