微信小程序-表格形式如何布局?
微信小程序没有现成的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]
}
});
微信小程序-表格形式如何布局?的更多相关文章
- 微信小程序:原生热布局终将改变世界
关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- 微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...
- 微信小程序 - 非入侵式布局
非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...
- 微信小程序CSS之Flex布局
转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
- 在微信小程序中学习flex布局
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 微信小程序之Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
随机推荐
- UVA796:Critical Links(输出桥)
Critical Links 题目链接:https://vjudge.net/problem/UVA-796 Description: In a computer network a link L, ...
- CCPC-Winter Camp div2 day5
DIV2 有部分div1的题会写 div1的大佬真的太强了 向他们学习 (好像和zqc大佬说过话了hhh,zqc大佬真的是一个超有意思的人啊,羡慕有妹子队友的zqc大佬) A: 你有一棵树,你想把它画 ...
- Java Zip压缩
1.压缩文件或整个目录 // ZipCompression.java import java.io.File;import java.io.FileInputStream;import java.io ...
- Spring Filter过滤器,Spring拦截未登录用户权限限制
转载自:http://pouyang.iteye.com/blog/695429 实现的功能:判断用户是否已登录,未登录用户禁止访问任何页面或action,自动跳转到登录页面. 比较好的做法是不管什 ...
- uva 1506 Largest Rectangle in a Histogram
Largest Rectangle in a Histogram http://acm.hdu.edu.cn/showproblem.php?pid=1506 Time Limit: 2000/100 ...
- NOI2001 方程的解数
1735 方程的解数 http://codevs.cn/problem/1735/ 2001年NOI全国竞赛 时间限制: 5 s 空间限制: 64000 KB 题目描述 Descripti ...
- 【设计模式】 模式PK:装饰模式VS适配器模式
1.概述 装饰模式和适配器模式在通用类图上没有太多的相似点,差别比较大,但是它们的功能有相似的地方:都是包装作用,都是通过委托方式实现其功能.不同点是:装饰模式包装的是自己的兄弟类,隶属于同一个家族( ...
- [Luogu 2261] CQOI2007 余数求和
[Luogu 2261] CQOI2007 余数求和 这一定是我迄今为止见过最短小精悍的省选题了,核心代码 \(4\) 行,总代码 \(12\) 行,堪比小凯的疑惑啊. 这题一看暴力很好打,然而 \( ...
- 【BZOJ2287】消失之物 [分治][DP]
消失之物 Time Limit: 10 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description ftiasch 有 N 个物品, ...
- 【BZOJ】1229 [USACO2008 Nov]toy 玩具
[算法]三分+贪心 [题解] 数据范围小的版本:餐巾计划 这题不是使用最小费用流的下凸函数,因为这题是要满足最大流,那么这题到底在三分什么? 三分的这个函数,其实是总费用随卖出玩具量变化而变化的函数, ...