符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
如何在微信小程序中制作表格?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联公司主要从事网站建设、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务叶集,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
在XXX.wxml中填写下面的代码
参数 内容 {{item.code}} {{item.text}} {{item.code}} {{item.text}}
在XXX.wxss中添加如下代码:
.table { border: 2px solid darkgray; width: 100%; margin-top: 1rem; margin-right: 1rem; margin-left: 1rem; } .tr { display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .td { width:20%; justify-content: center; display: flex; text-align: center; border-right: 2px solid #ddd; height: 100%; } .td-1 { width:19%; justify-content: center; display: flex; text-align: center; border-right: 2px solid #ddd; height: 100%; } .td-2 { width:80%; justify-content: center; border-right: 2px solid #ddd; text-align: left; height: 100%; max-width: 100%; padding: 40rpx 0; } .bg-w{ background: #afb4db; } .bg-g{ background: #E6F3F9; } .bg-g2{ background: #fff; } .th { width: 19%; justify-content: center; color: #fff; display: flex; height: 3rem; align-items: center; border-right: 2px solid #ddd; } .th-2 { width: 80%; justify-content: center; color: #fff; display: flex; height: 3rem; align-items: center; max-height: 3rem; max-width: 80%; }.th-text { width: 80%; justify-content: center; color: #000; display: block; height: 3rem; align-items: center; max-height: 3rem; max-width: 80%; }
在XXX.js页面的pages定义下面的数据
var idinfolist = [ { "code": "结果", "text": '' }, { "code": "省", "text": '' }, { "code": "市", "text": '' }, { "code": "县", "text": ''}, { "code": "性别", "text": ''}, { "code": "出生年月", "text": ''}, { "code": "地址", "text": ''} ] Page({ data: { listData: idinfolist, inputValue: '', //用于显示输入语句 searchinput: '', //用户输入的查询语句 })
看完上述内容,你们掌握如何在微信小程序中制作表格的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!