微信小程序自定义表格

微信小程序表格自定义列与列宽自适应

wxml:

<scroll-view scroll-x="true" ><view class="flex"><block wx:for="{{head}}"><view class="column" style="min-width:calc({{sizeList[index]+1}}em + 30rpx)"><view class="cell">{{item.name}}</view><view class="cell" wx:for="{{body}}" wx:for-item="it">{{it[item.key]}}</view></view></block></view>
</scroll-view>

js:

//存储每一列最长的长度let sizeList = [];let head = [{"key": "sex","name": "性别"}, {"key": "name","name": "姓名"}, {"key": "phone","name": "手机号"}, {"key": "address","name": "住址"}]let body = [{"sex": "男","name": "A","phone": "123213123213","address": "附近的看法金卡时间分厘卡圣诞节风口浪尖"}, {"sex": "女","name": "Bbbb","phone": "123","address": "附近的看法金卡时间分厘卡圣诞节风口浪尖附近的看法金卡时间分厘卡圣诞节风口浪尖附近的看法金卡时间分厘卡圣诞节风口浪尖"}]for (let item in head) {for (let it in body) {//初始化每一列的长度sizeList[item] = sizeList[item] || head[item].name.length;//得到每一列中 每一个单元格的内容let v = body[it][head[item].key];//得到 \w 的长度let wSize = v.match(/[\w]/g) || "";//得到除上面之外的其他内容的长度let otherSize = v.length - wSize.length;//计算每一个单元格的长度let vSize = wSize.length * 0.5 + otherSize;//将最长的一个单元格放入数组中if (vSize > sizeList[item])sizeList[item] = vSize;console.log(item, v, wSize, otherSize, vSize, sizeList[item])}}this.setData({sizeList: sizeList,head: head,body: body})

wxss:


.column {border: 1px #bbb solid;
}
.flex{display: flex;
}
.cell {padding: 10rpx;border-top: 1px #bbb solid;min-height: 64rpx;display: flex;justify-content: center;align-content: center;
}.cell:first-child {border-top: none;background-color: #ddd;
}/* .cell:nth-child(odd):not(:first-child) {background-color: #eee;
} */.column:not(:first-child) {border-left: none;
}

github: https://github.com/dreamlonglll/mini_program_table

微信小程序自定义表格相关推荐

微信小程序自定义表格样式
微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="t ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序自定义表格

微信小程序表格自定义列与列宽自适应

微信小程序自定义表格相关推荐

最新文章

热门文章

微信小程序 自定义表格

微信小程序 表格自定义列与列宽自适应

微信小程序 自定义表格相关推荐

最新文章

热门文章

微信小程序自定义表格

微信小程序表格自定义列与列宽自适应

微信小程序自定义表格相关推荐