微信小程序实现简易table表格

网友投稿 665 2023-11-07

本文实例为大家分享了微信小程序实现简易表格的具体代码，供大家参考，具体内容如下

微信小程序实现简易table表格

由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下

table.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class="table">
<view class="tr bg-w">
<view class="th">head1</view>
<view class="th">head2</view>
<view class="th ">head3</view>
</view>
<block wx:for="{{listData}}" wx:key="{[code]}">
<view class="tr bg-g" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.type}}</view>
</view>
<view class="tr" wx:else>
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.type}}</view>
</view>
</block>
</view>

table.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}

table.js

效果图如下

其实这也是很简单flex布局，更复杂的布局就交给大家了

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有

您可能感兴趣的文章:一秒学会微信小程序制作table表格微信小程序实现的绘制table表格功能示例微信小程序中显示html格式内容的方法微信小程序显示下拉列表功能【附源码-】微信小程序 实现列表项滑动显示删除按钮的功能微信小程序之多列表的显示和隐藏功能【附源码】微信小程序实现获取用户信息并存入数据库操作示例微信小程序设置全局请求URL及封装wx.request请求操作示例微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例微信小程序实现用table显示数据库反馈的多条数据功能示例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 示例
上一篇:人民日报小程序正式上线:人工智能媒体
下一篇:宜家、欧派打造小程序新玩法，家具业小程序大有可为！
相关文章

 发表评论

暂时没有评论，来抢沙发吧~