微信小程序表格组件封装

table.wxml

    <scroll-view class="table-wrap" scroll-x="{{true}}">
<view><view class="table"><view class="tr"><block wx:for="{{headers}}" wx:key="{{index}}">`在这里插入代码片`<view class="th left">{{item}}</view></block></view><view class="tr" wx:for="{{list}}" wx:key="index"><block wx:for="{{item}}" wx:key="index"><view class="td left">{{item}}</view></block></view></view>
</view></scroll-view>

table.wxss


.table-wrap{width: 100%;top: 20rpx;
}
.table{background-color: white;border:1px solid #dadada;border-right:0;border-bottom: 0;width: 100%;
}
.tr{width:100%;display: flex;justify-content: space-between;
}
.th{padding: 3px;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;width: 100%;/*font-weight: 800;*/background-color: rgba(139, 182, 155, 0.12);font-size: 28rpx;color: rgba(23, 21, 23, 0.73);
}
.td{padding: 3px;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;width: 100%;font-size: 28rpx;color: #666666;
}

**table.js**properties: {
list: {type: Array,value: []
},
headers: {type: Array,value: []
},
hasBorder: {type: String,value: "no"
},

},
在JSON文件中引入
“usingComponents”: {
“mytable”:"…/…/components/table/table"
}
其他的页面使用

<mytable list="{{list}}" headers="{{headers}"></mytable>

**页面JS部分**

data: {
headers: [“第一”, “第二”, “第三”, “第四”, “第五”],
list:[[100,100,100,100,100],[200,200,200,200,200]]
},
效果图

微信小程序表格组件封装相关推荐

【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
【愚公系列】2022年11月微信小程序-表格组件使用
文章目录前言一.表格组件使用 1.基础用法 1.1 代码 1.2 效果总结前言移动端的页面本应该很少有table表格这样的展示.操作,但总归有这样的需求,然而平时用的vant和iview的小 ...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
微信小程序日历组件封装和日历算法
github地址 github代码地址参考博文 https://www.cnblogs.com/webwei2017/articles/7723703.html 思路首先取得处理月的总天数接着定 ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
记录一下使用微信小程序wx-open-launch-weapp组件
微信小程序wx-open-launch-weapp组件 H5跳小程序的组件官方文档:微信开放文档开始配置这个组件只能在微信内置浏览器里面使用前期可以用微信开发者工具进行调试(公众号网页模式) ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...

微信小程序表格组件封装

微信小程序表格组件封装相关推荐

最新文章

热门文章