一秒学会微信小程序制作table表格
2019-02-15 00:21
495 查看
大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了。
效果图:
代码挺简单方便的:
wxml:
<view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="th th2">时间</view> <view class="th th3">伤害</view> </view> <view class="tr" wx:for="{{15}}"> <view class="td td1">2018/02/12</view> <view class="td td2">11:30</view> <view class="td td3">本次对海煞造成了100000点伤害</view> </view> </view> </view>
wxss:
.history-table-wrap{ position: absolute; width: 668rpx; height: 578rpx; left: 50%; margin-left: -334rpx; top: 70rpx; overflow-y: scroll; overflow-x: hidden; } /* 表格代码 */ .table{ border:1px solid #dadada; border-right:0; border-bottom: 0; width: 98%; margin-left: 1%; } .tr{ width:100%; display: flex; justify-content: space-between; } .th,.td{ padding: 10px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; text-align: center; width: 100%; } .th1,.th2,.td1,.td2{ width: 40%; } .th{ font-weight: 800; background-color: #b66242; font-size: 28rpx; color: #330e0e; } .td{ font-size: 20rpx; color: #ec9480; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序表格制作
- 微信小程序制作表格代码
- 微信小程序----简易table表格
- 微信小程序之获取后台动态数据表格布局display:table
- 【Ireport】利用Ireport5.2的table组件迅速制作表格导出pdf
- iReport使用table组件制作表格
- 教大家轻松制作Bootstrap漂亮表格(table)
- 002_table标签制作细线表格
- 微信小程序欢迎界面的制作
- 微信小程序实战篇-分类页面制作
- 一分钟学会使用Inno Setup 制作安装程序
- 基于C++的Excel表格分析程序【制作TF表】
- 微信小程序 小程序制作及动画(animation样式)详解
- 使用Table和Css制作实线表格
- 使用table标签制作常用的html表格
- 关于使用微信小程序制作类似H5的翻屏效果
- 想用微信小程序制作地图标识,需要哪些基础知识??
- Flex 实现表格布局 (微信小程序)
- TableLayout的使用来制作表格
- 微信小程序在线制作 自己制作微信小程序