微信小程序实现简单表格
更新时间：2019年02月14日 14:44:12 作者：祈澈菇凉
这篇文章主要介绍了微信小程序实现简单表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现简单表格的具体代码，供大家参考，具体内容如下
效果图：
wxml
<view class="table">
<view class="tr bg-w">
<view class="th">SPB</view>
<view class="th">DPB</view>
<view class="th ">日期</view>
</view>
<block wx:for="{{listData}}" wx:key="{[code]}">
<view class="tr" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.date}}</view>
</view>
<view class="tr" wx:else>
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.date}}</view>
</view>
</block>
</view>
wxss
.table {
border: 0px solid darkgray;
font-size: 12px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
js
Page({
data: {
listData: [
{ "code": "120", "text": "70", "date": "2018年4月19日" },
{ "code": "125", "text": "74", "date": "2018年4月17日" },
{ "code": "119", "text": "76", "date": "2018年4月16日" },
{ "code": "117", "text": "78", "date": "2018年4月15日" }
]
},
onLoad: function () {
console.log('onLoad')
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文是对javascript在的函数及作用域进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了JS实现的简单分页功能,涉及javascript事件响应及页面元素遍历、动态构造等相关操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了js+css实现文字散开重组动画特效,需要的朋友可以参考下2015-08-08
一文详解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四个不同的数据结构，它们都有不同的特点和用途，本文详细介绍了Map、Set、WeakMap和WeakSet的用法及区别，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Js为表单动态添加节点内容的方法,实例分析了js针对表单节点进行添加操作的常用技巧,需要的朋友可以参考下2015-02-02
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器，自己测试感觉还好,代码都给了注释，非常不错，推荐大家学习。2011-12-12
静态页面的值传递(三部曲)...2006-09-09
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-03-03
使用幻灯片效果的网站目前很普遍，本以为很复杂，实现起来却发现很简单，现成的jquery插件jquery.KinSlideshow.js便可实现幻灯片效果2013-11-11
读取excel文件是日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于js使用xlsx读取excel文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论