时间:2021-05-18
本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下
由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下
table.wxml
<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
.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
Page({ data: { listData:[ {"code":"01","text":"text1","type":"type1"}, {"code":"02","text":"text2","type":"type2"}, {"code":"03","text":"text3","type":"type3"}, {"code":"04","text":"text4","type":"type4"}, {"code":"05","text":"text5","type":"type5"}, {"code":"06","text":"text6","type":"type6"}, {"code":"07","text":"text7","type":"type7"} ] }, onLoad: function () { console.log('onLoad') }})效果图如下
其实这也是很简单flex布局,更复杂的布局就交给大家了
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考,具体如下:表格的绘制jsPage({data:{infeed:['"","1周","
本文实例为大家分享了微信小程序制作表格的具体代码。微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,下面是我做的表格图片:方法如下:在XXX.wxm
效果图如下所示:下面给大家分享微信小程序横向增长表格的实例代码,代码如下所示:{{item.day}}{{item.number}}.table{font-si
微信小程序textarea简易解决方案微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。虽然可以使用bindblur事件,但
微信小程序商家头像更换怎么实现?微信小程序商家头像的更换属于微信小程序开发的内容了哦,各位微信小程序商家,您可以去更换微信小程序商家头像哦,以下就是微信小程