微信小程序实现一个简单的表格
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')
}
})
微信小程序实现一个简单的表格的更多相关文章
- 微信小程序发布一个月,世界并没有什么不同
从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
- 微信小程序web-view的简单思考和实践
微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简 ...
- 微信小程序之最简单的Demo设计使用
这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ...
- 微信小程序创建一个新项目
1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...
- 微信小程序网络封装-简单高效
废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...
- 微信小程序——初始化一个小程序项目
最近准备学习一下微信小程序,因为之前有react native项目经验,学习起来应该困难不大 微信小程序官网地址:https://mp.weixin.qq.com/debug/wxadoc/dev/i ...
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 微信小程序注册和简单配置
微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret App ...
随机推荐
- BZOJ3158: 千钧一发
[传送门:BZOJ3158] 简要题意: 给出n个机器,每个机器有a[i]基础值和b[i]价值 选出一部分机器使得这些机器里面两两至少满足以下两种条件之一: 1.a[i]2+a[j]2!=T2(T为正 ...
- python 写了一个批量拉取文件进excel文档
路径如: C:\\Users\\huaqi\\Desktop\\信息收集 “信息收集”目录下有以下子目录:[技术,客服,运营,行政] “技术”目录下有以下子文件:[小白.txt,小红.txt,小黑.t ...
- Codeforces 344D Alternating Current 简单使用栈
Description Mad scientist Mike has just finished constructing a new device to search for extraterres ...
- 机器学习(四) 分类算法--K近邻算法 KNN (上)
一.K近邻算法基础 KNN------- K近邻算法--------K-Nearest Neighbors 思想极度简单 应用数学知识少 (近乎为零) 效果好(缺点?) 可以解释机器学习算法使用过程中 ...
- NOIP愤怒的小鸟
愤怒的小鸟 Description: 给你\(n<=18\)个小猪,发射的小鸟轨迹为抛物线,求最小用多少个小鸟可以将小猪全部干掉 看到n很小,我想到了搜索,于是我用\(dfs\)枚举出,每个抛物 ...
- jmind-redis一个redis的nio客户端
Redis是一个基于key/value的系统.Redis目前最新版本是2.2.4,用着很不错,不过java版本的客户端比较的不给力,目前redis 客户端jedis 是基于io 的socket . 而 ...
- cogs 50. [NOIP2002] 选数
50. [NOIP2002] 选数 ★ 输入文件:choose.in 输出文件:choose.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述]: 已知 n 个整数 ...
- 集群通信组件tribes之用法
上面已经对tribes的内部实现机制及原理进行了深入的剖析.在理解它的设计原理后看看怎样使用tribes.整个使用相当简单便捷,仅仅须要四步: ① 定义一个消息对象,因为这个消息对象是要在网络之间传递 ...
- codeforces 543 C Remembering Strings
题意:若一个字符串集合里的每一个字符串都至少有一个字符满足在i位上,仅仅有它有,那么这个就是合法的,给出全部串的每一个字符修改的花费,求变成合法的最小代价. 做法:dp[i][j].前i个串的状态为j ...
- 【HDOJ 5384】Danganronpa
[HDOJ 5384]Danganronpa AC自己主动机. .. 当时感觉用字典树 标神也往自己主动机想来着..手太生加上时间紧迫也没敲--回来一看题解什么AB同一时候建自己主动机...顿时愣了 ...