微信小程序实现固定表头固定列表格上下左右可滑动

娜娜啊吖

于 2024-08-12 17:54:40 发布

阅读量477

点赞数 3

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/pqn_cc/article/details/141136398

版权

微信小程序实现固定表头固定列表格上下左右可滑动

需求：微信小程序实现固定表头固定列表格组件
功能
- 排序表格
- 表头可固定
- 首列固定(可以优化成可以配置指定列左侧右侧固定)
- 翻页(上拉加载)监听
- 表头数据动态

实现思路

开始想用三个ScrollView去实现滚动联动，固定表头、列的话，表格内容滚动表头、列也应该对应滚动，写了demo后发现监听一个ScrollView的位置信息去设置另外两个ScrollView的位置真机会很卡，体验极差
使用position：sticky; 让表头相对表格顶部sticky，每行的第一个元素相对当前行左侧sticky。
遇到的问题
- 左右滑动时，动过一屏内容溢出，解决方法：用内容宽度 width: max-content;

效果图
在这里插入图片描述

具体代码

在这里插入代码片
<view class="plateContainer"> 
    <scroll-view class="table-scroll" scroll-y="{
    {isScrollY}}" scroll-left="{
    {scrollLeftval}}" scroll-x="{
    {isScrollX}}" bind:scrolltolower="loadMore" scroll-top="{
    {topNum}}" style="height: {
       {
       tableHeight}}px;" >
        <!-- 表格头部 -->
        <view class="table">
            <view class="table-row header">
                <view class="table-cell {
    {utils.isfixedFn(item.isfixed)}}" bind:tap="toSort" data-type="{
    {item.sortVal}}" data-key="{
    {item.activeId}}" data-item="{
    {item}}" wx:for="{
    {headList}}" wx:key="index">
                    {
  {item.name}}         
                    <view class="sort {
    {item.activeId==active?'active': ''}}" wx:if="{
    {item.isSort}}">
                        <view class="icon icon1 {
    {sort}}"><van-icon