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')
} })

微信小程序实现一个简单的表格的更多相关文章

  1. 微信小程序发布一个月,世界并没有什么不同

    从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...

  2. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

  3. 微信小程序web-view的简单思考和实践

    微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简 ...

  4. 微信小程序之最简单的Demo设计使用

    这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ...

  5. 微信小程序创建一个新项目

    1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...

  6. 微信小程序网络封装-简单高效

    废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...

  7. 微信小程序——初始化一个小程序项目

    最近准备学习一下微信小程序,因为之前有react native项目经验,学习起来应该困难不大 微信小程序官网地址:https://mp.weixin.qq.com/debug/wxadoc/dev/i ...

  8. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  9. 微信小程序注册和简单配置

    微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret App ...

随机推荐

  1. Android TextureView简易教程

    如果你想显示一段在线视频或者任意的数据流比如视频或者OpenGL 场景,你可以用android中的TextureView做到. TextureView的兄弟SurfaceView 应用程序的视频或者o ...

  2. Android View体系(九)自定义View

    相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...

  3. BZOJ 3631 链剖+差分

    思路: 1.树链剖分+用带标记的线段树维护操作(复杂度O(nlog2n)) 2.树链剖分LCA(TarjanLCA等各种LCA)+差分 复杂度(O(n)->O(nlogn)之间) 下面就说说怎么 ...

  4. PullToRefreshListView中嵌套ViewPager滑动冲突的解决

    PullToRefreshListView中嵌套ViewPager滑动冲突的解决 最近恰好遇到PullToRefreshListView中需要嵌套ViewPager的情况,ViewPager 作为头部 ...

  5. 使用Xcode的Targets来管理开发和生产版本的构建

    如何创建一个新的Target 如何在Xcode中创建一个开发的target?我使用示例项目“todo”引导您一步一步完成整个过程..您也可以使用自己的项目并按照步骤: 1. 在项目的导航面板进入项目设 ...

  6. C# 调用者信息特性(Attribute)

    .NET 4.5中引用了三种特性(Attribute), 该特性允许获取调用者的当前编译器的执行文件名.所在行数与方法或属性名称. 命名空间 System.Runtime.CompilerServic ...

  7. 无法在WEB服务器上启动调试

    错误:站点使用 IP 地址 Visual Studio 2012 调试器尝试自动附加到正在使用 IP 地址的 Web 应用程序时,会发生该错误. 如果在 IIS 中将“网站标识”更改为“使用特定 IP ...

  8. QVBoxLayout移除控件之后没有消失

    想在QWidget里面动态的添加和删除控件,给QWidget设置了一个布局管理器QVBoxLayout,要删除控件可以 使用QVBoxLayout::removeWidget(QWidget *w)方 ...

  9. Onvif开发之服务端发现篇

    服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...

  10. 你必须要知道的几个CSS技巧

    有些经典的CSS技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的CSS技巧: 1.在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应 ...