微信小程序求助,表格表头第一行不固定？

Question

自己仿照大佬的代码写的，顶部和左侧固定，右侧可以左右滑动，但是如果斜着拉动表格，表格会上下左右同时滚动，效果图如下：

如果修改对应的代码，虽然斜着拉动表格不会同时滚动了，但是表头也无法固定了。。。纠结了好久，都快查秃了。。也没想到好的解决办法。效果图如下：

期望实现本图效果，然后表头可以固定， 还有一个问题，真机测试的时候，如果左右拉动，表头的名称单元格的内容“名称”会闪动。

希望大佬可以指出问题所在，萌新感激不尽。 初学编程，尝试写小程序，名词叫法可能有误，还请谅解~

代码如下：

wxml：

<ScrollView class="table" scroll-x scroll-y bindscrolltolower="handleScrollToLower">
  <View class="sticky-box" style="height:{{tableHeight}}rpx;">
    <View class="table__head" style="width:{{tableWidth}}rpx;">
      <View class="table__head__td" wx:for="{{dataAttribute}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
        <Text
          class="table__head__td__text"
        >{{attrItem.title}}</Text>
      </View>
    </View>
    <View class="table__row" wx:for="{{data}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem" style="width:{{tableWidth}}rpx;">
      <Text class="table__row__td" wx:for="{{dataAttribute}}" wx:key="dataIndex" wx:for-index="attrIndex" wx:for-item="attrItem">{{dataItem[attrItem.key] || '-'}}</Text>
    </View>
  </View>
</ScrollView>

JS代码如下：

const app = getApp();

Page({
  data: {
    data: [
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },

      // 其他数据...
    ],
    dataAttribute: [
      {
        title: '名称',
        key: '3000X'
      },
      {
        title: '今日价格',
        key: 'onejg'
      },
      {
        title: '昨日价格',
        key: 'twojg'
      },
      {
        title: '涨跌',
        key: 'zd'
      },
      {
        title: '单位',
        key: '30018'
      },
      {
        title: '备注',
        key: '3003Y'
      }
    ],
    tableHeight: (20 + 1) * 96,
    tableWidth: 200 * 6 + 60
  }
});

WXSS代码如下：

page{
  font-size: 26rpx;
  line-height: 60rpx;
  color: #222;
  height: 100%;
  width: 100%;
}
.table{
  display: block;
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 100%;
}
.sticky-box{
}
.table__head{
  height: 96rpx;
  white-space: nowrap;
  position: sticky;
  top: 0rpx;
  z-index: 100;
  height: 88rpx;
  font-size: 24rpx;
  line-height: 88rpx;
  color: #aaabbd;
  background-color: #f8f8f8;
  border-bottom: 2rpx solid #ecf1f8;
  background-color: #fff;
  white-space: nowrap;
  display: flex;
}
.table__head__td{
  width: 200rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.table__head__td:nth-child(1) {
  padding-left: 24rpx;
  width: 260rpx;
  margin-right: 40rpx;
  position: sticky;
  z-index: 101;
  left: 0rpx;
}
.table__head__td__text{
  display: inline;
}
.table__row{
  position: relative;
  height: 96rpx;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2rpx solid #ecf1f8;
}
.table__row__td{
  overflow: scroll;
  white-space: nowrap;
  width: 200rpx;
  display: inline-block;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 26rpx;
  line-height: 96rpx;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.table__row__td:nth-child(1) {
  margin-right: 40rpx;
  padding-left: 24rpx;
  width: 260rpx;
  position: sticky;
  z-index: 10;
  left: 0;
}

Answer 1

<ScrollView scroll-y style="height: 100%; width: 100%;" bindscroll="syncScroll">
  <View style="width: 100%;">
    <ScrollView scroll-x style="width: 100%; white-space: nowrap;" id="scrollHead" class="scrollHead" bindscroll="syncScroll">
      <View class="table__head" style="width:{{tableWidth}}rpx;">
        <View class="table__head__td" wx:for="{{dataAttribute}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
          <Text class="table__head__td__text">{{attrItem.title}}</Text>
        </View>
      </View>
    </ScrollView>
    <ScrollView scroll-x style="width: 100%; white-space: nowrap;" id="scrollBody" class="scrollBody" bindscroll="syncScroll">
      <View class="table__row" wx:for="{{data}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem" style="width:{{tableWidth}}rpx;">
        <Text class="table__row__td" wx:for="{{dataAttribute}}" wx:key="dataIndex" wx:for-index="attrIndex" wx:for-item="attrItem">{{dataItem[attrItem.key] || '-'}}</Text>
      </View>
    </ScrollView>
  </View>
</ScrollView>
CSS（WXSS）部分：

.scrollHead, .scrollBody {
  width: 100%;
}

.table__head, .table__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}

.table__head__td, .table__row__td {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table__head__td__text {
  will-change: transform;
}
JS部分：
Page({
  data: {
    data: [
      {
        '3000X': '的大趋势（达瓦亲切）多少钱',
        'onejg': 5000,
        'twojg': 4000,
        'zd': -50,
        '30018': '元/吨',
        '3003Y': '挂卖量200，以3830-3835全部成交'
      },
      
    ],
    dataAttribute: [
      {
        title: '名称',
        key: '3000X'
      },
     
    ],
    tableHeight: (20 + 1) * 96,
    tableWidth: 200 * 6 + 60,
    scrollHeadLeft: 0,
    scrollBodyLeft: 0
  },
  syncScroll(e) {
    var id = e.currentTarget.id;
    if (id == 'scrollHead') {
      this.setData({
        scrollBodyLeft: e.detail.scrollLeft
      });
    } else if (id == 'scrollBody') {
      this.setData({
        scrollHeadLeft: e.detail.scrollLeft
      });
    }
  }
});

Answer 2

我擦，直接梦回2018，我是用jq+vue实现的,https://segmentfault.com/q/1010000016739623

多年过去又遇到了~【慢慢调，总归会解决问题的】