小程序封装table组件

实在是懒得自己封装了，就在网上找了一下别人封装好的，这里主要参考的是灰信网上的一篇文章，我在他的基础上改了一下样式，动态生成列表每一列列宽。

表格可左右横向滑动

一、子页面

table.wxml

<scroll-view class="table-wrap" scroll-x="{{true}}" ><view class="table"><view class="tr"><block wx:for="{{headers}}" wx:key="index"><view class="th left" style="width:{{tableW[index]}}rpx">{{item}}</view></block></view><view class="tr" wx:for="{{list}}" wx:key="index"><block wx:for="{{item}}" wx:key="index"><view class="td left" style="width:{{tableW[index]}}rpx">{{item}}</view></block></view></view>
</scroll-view>

table.wxss

.table-wrap{ width: 100%; }
.table{background-color: white;border-right:0;border-bottom: 0;
}
.tr{ display: flex; justify-content: space-between;align-items: center;}
.th, .td{flex-shrink: 0; /* 用数值来收缩比例 默认值为1，0不收缩 */padding: 4rpx;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;font-size: 30rpx; line-height: 70rpx;
}
.th{color: rgba(23, 21, 23, 0.73);background-color: #FFF8ED;}
.td{color: #666666;}
.tr:first-child .th{border-top:1px solid #dadada;}

table.js

/**list:表格数据, headers:表头名称数据,tableW:每一列宽  */
Component({// 组件的属性列表properties: {list: {type: Array,value: []},headers: {type: Array,value: []},tableW: {type: Array,value: [180, 120,180,180,180,180,140]}}
})

二、父页面使用

父页面.json

{"usingComponents": {"mytable":"…/…/components/table/table"
}

父页面.wxml

<!----  使用默认宽度时，tableW="{{tableW}}"可以省略，js中也不需要tableW这个参数 ---->
<mytable list="{{list}}" headers="{{headers}}" tableW="{{tableW}}"></mytable>

父页面.js

data: {headers: ["第一", "第二", "第三", "第四", "第五", "第六","第七"],  //表格头部信息list:[[100,100,100,100,100,10,70],[200,200,200,200,200,30,70]], //表格数据，每一项表示一行的数据tableW: [120, 180,180,180,180,180,140]  //每一列宽
}

小程序封装table组件相关推荐

微信小程序封装echarts组件
下载echarts-for-weixin小程序组件,将ec-canvas文件夹放到小程序项目中创建echarts组件组件代码  ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
uniapp 小程序封装左滑效果组件
uniapp 小程序封装左滑效果组件引言封装组件页面使用注意事项引言小程序电商项目购物车,往往都会有左滑删除功能,在不想使用插件的前提下,就需要自己编写,因此我个人写了一个左滑效果组件封 ...
小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析
导语 | 本文是Kbone作者june在云加社区微信群中的分享整理总结而成(编辑:尾尾).同时,june将出席11月16日的TWeb腾讯前端技术大会,欢迎现场交流. 大家好,我是来自腾讯微信小程序团队 ...
小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
微信小程序的自定义组件（2）
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...

小程序封装table组件

一、子页面

二、父页面使用

小程序封装table组件相关推荐

最新文章

热门文章

小程序 封装table组件

一、子页面

二、父页面使用

小程序 封装table组件相关推荐

最新文章

热门文章

小程序封装table组件

小程序封装table组件相关推荐