微信小程序原生表格组件

已于 2023-03-25 20:54:35 修改
阅读量1.3k 收藏 14
点赞数 4
分类专栏： js 文章标签： 微信小程序 css
于 2023-03-12 21:33:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_zsen/article/details/129481477
版权

cv大法：先找个差不多实现基本功能的组件

 源代码：GitHub - zss823158062/senx-table: 微信小程序 表格组件

lrjTable

然后在上面做优化：

1、优化了按钮点击bug；

2、优化列数过多，可左右滑动；

3、首列冻结；操作列冻结

4、表体表头联动滚动

5、表头固定可配置化

附微信代码片段:

https://developers.weixin.qq.com/s/of9dlFmf7vGC

遇到的最大的坑就是scroll-view导致sticky属性失效；找了一天，找到了方案

https://www.cnblogs.com/nmrnzb/p/13689787.html

微信小程序表格组件(锁头、锁列、样式、字体颜色等)
小风才子的博客
03-15 4426
实现微信小程序的锁头所列表格，并加入样式特性
微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、斑马线样式
qq_44722452的博客
02-25 5847
一个具有固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、和斑马线样式的微信小程序表格组件。
miniprogram-table-component：微信小程序自定义表格组件（自定义第三方组件），适用于小程序原生开发
02-03
小程序表组件 微信小程序自定义组件-表组件-支持第三方npm包使用 使用此组件需要依赖小程序基础库2.2.2版本，同时依赖开发者工具的npm构建。具体细节可查阅 。 表组件 实现了table的以下功能： 1.基础表格 2.带斑马纹表格 3.带间隔边框表格 4.自定义无数据的提示文案 5.自定义表格头样式 6.固定表头 7.表格横向滑动 8.自定义表格行和单元格样式 9.某些行被点击时会触发对外事件 快速上手 一个很简单的微信小程序table组件诞生了。使用很简单，就是按照npm包和微信自定组件的用法使用。 1，安装和约会 安装组件： npm install --save miniprogr
taro3-table：赋能微信小程序的表格组件
最新发布
gitblog_00945的博客
04-21 737
taro3-table：赋能微信小程序的表格组件 taro3-table 基于 Taro3 的微信小程序端多功能表格组件 项目地址: https://gitcode.com/gh_mirrors/ta/taro3-table ...
微信小程序表格组件
weixin_43699649的博客
04-27 991
https://github.com/habc0807/miniprogram-table-component
开箱即用-微信原生小程序Table表格组件
RequesToGod的博客
08-10 2012
微信原生小程序Table表格组件 开发微信小程序过程中不可避免的会使需要展示表单数据。 找遍了各大组件库没有合适的，分享一个的微信小程序Table组件。 Gitee:https://gitee.com/boriska/table-build.git GitHub:https://github.com/Boriska1996/nimiPro-table.git ...
微信小程序表格合并demo
11-21
在这个“微信小程序表格合并demo”中，我们可以学习到如何在微信小程序中实现表格的合并功能，这对于创建数据展示或者用户交互界面来说是非常重要的。 首先，我们要了解的是`index.js`文件，这是小程序的逻辑层，它...
微信小程序自定义表格组件（自定义第三方组件），适用于小程序原生开发。.zip
01-11
本文将详细解析如何在小程序原生环境中实现一个自定义表格组件，并探讨其在轻量级应用中的重要性和优势。 首先，我们要明白微信小程序的特点。微信小程序是一种基于微信平台的应用开发框架，它提供了丰富的API和...
微信小程序如何自定义table组件
10-16
然而微信小程序的原生组件中并没有提供table组件。因此，需要开发者自行创建一个自定义的table组件来满足需求。自定义table组件的步骤分为引入、使用、配置这三个部分。 首先，在使用自定义table组件之前需要在页面...
微信小程序 表格组件封装
Wangyuan_wo的博客
09-23 1434
微信小程序表格封装使用
微信小程序图表组件 wx-charts-master
12-23
微信小程序图表组件 wx-charts-master js代码支持微信小程序开发
微信小程序开发表格demo
03-08
小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
微信小程序 表格组件
小游
12-12 1484
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 找到一个开源项目： https://github.com/s249359986/wx-minapp-components
微信小程序自定义表格组件：miniprogram-table-component
gitblog_07612的博客
09-13 780
微信小程序自定义表格组件：miniprogram-table-component miniprogram-table-component 项目地址: https://gitcode.com/gh_mirrors/mi/minip...
微信原生小程序构建表格模板控件
学而不思则罔,思而不学则殆
11-24 1879
在原生微信小程序开发中，有时候会遇到需要通过`表格`来呈现一定的数据，尽管在移动端，使用表格来呈现数据，并不是常见的，但是也保不齐会遇到这样的需求，然而在原生微信小程序中，也 **`并没有提供 `** 原生的 **`table`表格类标签供我们使用，这时候一般让人很无头绪，但是总要有人去先驱性的造轮子，经过参考大量社区中知识点的思路，还是东拼西凑的实现了一套表格类的控件。
小程序 table组件
weixin_67585820的博客
03-28 9340
满足基本需求，可自定义数据，左右滑动，自定义样式， 后面还会加新的内容
2020-09-08
weixin_41576919的博客
09-08 1109
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 @[TOC](2020-09-08) 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 #1 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 #2 二、使用步骤 1.引入库 代..
微信小程序开发表格组件
03-01
### 微信小程序表格组件开发指南 #### 创建基础表格结构 为了构建一个功能丰富的表格组件，在微信小程序中可以利用`<view>`标签来模拟表格的行为。考虑到性能优化和用户体验，建议采用虚拟列表技术处理大量数据。 ```html <!-- wxml --> <scroll-view scroll-y="true" bindscrolltolower="loadMore"> <view class="table-header"> <!-- 表头部分 --> <view class="cell">序号</view> <view class="cell">姓名</view> <view class="cell">年龄</view> </view> <block wx:for="{{data}}" wx:key="index"> <view class="row {{index % 2 === 0 ? 'even' : ''}}"> <view class="cell">{{item.id}}</view> <view class="cell">{{item.name}}</view> <view class="cell">{{item.age}}</view> </view> </block> </scroll-view> ``` #### 实现固定表头效果 通过CSS样式控制表头位置不变动，当页面滚动时保持可见状态。这可以通过设置`.table-header`类的定位属性实现[^1]。 ```css /* wxss */ .table-header { display: flex; position: sticky; /* 固定表头 */ top: 0; background-color: white; } .cell { flex-grow: 1; text-align: center; padding: 8px; border-bottom: 1px solid #ddd; } .row.even { background-color: #f9f9f9; } ``` #### 添加交互逻辑 对于单元格点击事件的支持，可以在每一行上绑定tap事件处理器，并传递所需参数给JavaScript函数处理业务逻辑[^2]。 ```javascript // js Page({ data: { data: [ { id: 1, name: "张三", age: 25 }, { id: 2, name: "李四", age: 30 } ] }, onLoad() {}, onCellTap(e) { const index = e.currentTarget.dataset.index; console.log(`第${index}行被点击`); } }) ``` #### 自定义样式调整 为了让表格看起来更美观，可以根据实际需求修改背景颜色、字体大小等视觉元素；同时也可以引入斑马条纹设计提升可读性。 上述方法展示了如何基于原生能力快速搭建起满足基本要求的表格控件。如果追求更高阶的功能，则可能需要考虑集成第三方库或是深入研究官方文档探索更多可能性[^3]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值