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

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 class="table" scroll-x scroll-y bindscrolltolower="handleScrollToLower">  <View class="sticky-box" style="height:{{tableHeight}}rpx;">    <ScrollView scroll-x style="white-space: nowrap;">      <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-y style="overflow: scroll;">      <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>

.table {  width: 100%;  height: 100%;  overflow: hidden;}.sticky-box {  position: relative;}.table__head {  position: sticky;  top: 0;  display: flex;  justify-content: space-between;  align-items: center;  background-color: #fff;  border-bottom: 1px solid #e8e8e8;}.table__head__td {  flex: 1;  display: flex;  justify-content: center;  align-items: center;  height: 80rpx;  border-right: 1px solid #e8e8e8;}.table__head__td__text {  text-align: center;}.table__row {  display: flex;  justify-content: space-between;  align-items: center;  height: 80rpx;  border-bottom: 1px solid #e8e8e8;}.table__row__td {  flex: 1;  display: flex;  justify-content: center;  align-items: center;  border-right: 1px solid #e8e8e8;}