微信小程序-表格形式如何布局?
微信小程序没有现成的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布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
 
随机推荐
- Linux系统上的popen()库函数
			
popen可以是系统命令,也可以是自己写的程序a.out. 假如a.out就是打印 “hello world“ 在代码中,想获取什么,都可以通过popen获取. 比如获取ls的信息, 比如获取自己写的 ...
 - 剑桥offer(41~50)
			
41.题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). class Solution { pub ...
 - dubbox小demo
			
概述: 我们建立两个web项目,一个是service负责提供服务,另一个是web项目负责调用服务. 两个项目都是 maven Project 项目 生产者项目: 项目中主要就是: pom文件,引入相关 ...
 - Stars POJ - 2352
			
Astronomers often examine star maps where stars are represented by points on a plane and each star h ...
 - Maatkit--Mysql的高级管理工具
			
Maatkit是不错的mysql管理工具,已经成为Percona的一部分.包含以下主要工具: 1.mk-table-checksum 检查主从表是否一致的有效工具 2.mk-table-sync 有效 ...
 - Enterprise Architect13 : 去掉UML图页面右侧那一道竖线
			
我们在使用Enterprise Architect 中,画用例图,时序图时,页面右侧有一条竖线,见下图: 如果页面元素太多,会超出竖线的范围,显得很不协调. 如果像去掉竖线,只需选择主菜单的Layou ...
 - web api 支持cors
			
1. configservice //******************* cors start *********************** var urls = Configuration[S ...
 - Spring Security 过滤器链
			
Alias Filter Class Namespace Element or Attribute CHANNEL_FILTER ChannelProcessingFilter http/interc ...
 - csc_滤镜filter和实现透明的两种方式
			
有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contras ...
 - C题 hdu 1408 盐水的故事
			
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1408 盐水的故事 Time Limit: 2000/1000 MS (Java/Others) ...