小程序默认是不支持table表格的,如果我们想实现小程序表格效果,就得自己拼凑。实现方案有很多,不过个人感觉通过form和input标签来实现是比较好的方式。
下面来看下实现思路
一,首先看index.wxml文件
这里用form实现整个表格,然后input实现表格内的单元格。布局其实很简单,主要是布局完成后通过css来实现表格样式
这里有几点要说明的
1,input可以通过设置disabled来不让用户输入,这样就可以作为纯文本展示。比如上图的文本
2,表格的间隔先需要自己用wxss来拼凑
这里贴代码不太好看,如果想看详情代码可以查看原文去查看,这里简单截一段代码图片
二,再来看index.wxss文件
这里我不多说了,代码里都有注释
/*index.wxss */
到这里我们就可以实现小程序表格效果了
结语
-其实小程序学起来很容易,你只需要会基本的css样式和js就可以直接上手写小程序。并且小程序封装的一些组件,比如首页轮播图只需要用小程序的swiper 组件就能很好的实现自动轮播,循环轮播,定时轮播。传送门:http://blog.csdn.net/qiushi_1990/article/details/77922876
系列教程
-由于之前都是在csdn上写的零基础自学小程序前8章教程,感兴趣的可以移步过去看下,有图有源码:http://blog.csdn.net/qiushi_1990/article/category/6536726
关于源码
- 其实文章里贴出的就是完整的源码了,如果你想要整个项目源码可以移步到:https://github.com/qiushi123/xiaochengxu_demos