js实现移动端简易滑动表格 js实现移动端简易滑动表格

本文实例为大家分享了js实现移动端简易滑动表格的具体代码，供大家参考，具体内容如下
上js文件代码

/*scroll-view样式*/.scroll-table {min-height: 100rpx; white-space: nowrap; // padding: 10rpx 20rpx; // margin-top: 30rpx; padding-bottom: 60rpx; .scroll-tr {min-width: 750rpx; display: inline-block; /*表头样式*/.cus-th {background-color: #f3f3f3; }/*行样式*/.cus-tr {box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: center; height: 100%; /*设置边框*/border-color: #ccc; border-style: solid; border-width: 0; border-top-width: 1px; border-left-width: 1px; border-bottom-width: 1px; color: #333; + .cus-tr {border-top-style: none; }/*表格样式*/.cus-td {width: 220rpx; box-sizing: border-box; padding: 1px; font-size: 25rpx; word-break: break-all; border-color: #ccc; border-style: solid; border-width: 0; border-right-width: 1px; min-height: 60rpx; white-space: pre-wrap; word-wrap: break-word; /**/display: flex; justify-content: center; //左右居中align-items: center; //上下居中/* 跨列 */&-colspan {flex-grow: 1; width: 0; }/* 内容顶部对齐 */&-top {align-items: flex-start; align-content: flex-start; }/* 内容底部对齐 */&-bottom {align-items: flex-end; align-content: flex-end; }/* 内容左边对齐 */&-left {justify-content: flex-start; }/* 内容右边对齐 */&-right {justify-content: flex-end; }}}}}

使用方式

// 或者使用插槽 thList: ['姓名', '年龄', '性别', '性别', '性别'], //表头 tdList: ['name', 'age', 'sex'], //自定义属性名(要把useCusTdList变成true 如果为false就是按数组顺序赋值) tdData: [{ name: '张三', age: '18', sex: '男' }],

【js实现移动端简易滑动表格】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。