写微信小程序想显示数据库数据的时候遇到这种显示不全的情况，找了半天不知道哪里有问题，请教一下 wxml： <scroll-view scroll-x="true" class="scroll-view-x"> <view class="table"> <!-- 表头 --> <view class="tr header"> <view class="td">id</view> <view class="td">sugar</view> <view class="td" style="width: 119px;">vc</view> <!-- 动态生成列标题 --> <block wx:for="{{numList}}" wx:key="*this"> <view class="td">num{{item}}</view> </block> </view> <!-- 数据行，内嵌垂直滚动 --> <scroll-view scroll-y="true" class="scroll-view-y"> <block wx:for="{{dataList}}" wx:key="index"> <view class="tr"> <!-- 动态渲染每一行 --> <view class="td">{{item.id}}</view> <view class="td">{{item.sugar}}</view> <view class="td">{{item.vc}}</view> <block wx:for="{{numList}}" wx:for-item="j" wx:key="*this"> <view class="td">{{item['num' + j] || '-'}}</view> </block> </view> </block> </scroll-view> </view> </scroll-view> WXSS： /* 滚动区域：水平滚动 */ .scroll-view-x { white-space: nowrap; /* 防止内容自动换行 */ overflow-x: auto; /* 开启水平滚动 */ background-color: #f9f9f9; } /* 滚动区域：垂直滚动 */ .scroll-view-y { max-height: 400px; /* 限定表格最大高度，可根据需要调整 */ overflow-y: auto; /* 开启垂直滚动 */ } /* 表格容器 */ .table { display: inline-block; /* 允许表格在水平滚动中扩展宽度 */ width: max-content; /* 表格宽度根据内容动态调整 */ border-collapse: collapse; /* 去掉单元格之间的间距 */ } /* 行 */ .tr { display: flex; /* 使用 flex 布局，让行内容水平排列 */ background-color: #fff; } /* 表头样式 */ .tr.header { background-color: #f0f0f0; /* 表头背景色 */ font-weight: bold; /* 表头加粗 */ position: sticky; /* 表头固定在顶部 */ top: 0; z-index: 10; } /* 单元格 */ .td { flex: 0 0 100px; /* 单元格宽度固定 */ padding: 8px 8px; /* 单元格内边距 */ text-align: center; /* 文本居中 */ border: 1px solid #ddd; /* 单元格边框 */ box-sizing: border-box; /* 包括边框在内计算宽度 */ } /* 特殊宽度单元格 */ .td[style] { flex: 0 0 119px; /* 根据表头的样式要求设置宽度 */ } /* 表格行样式 */ .tr:nth-child(odd) { background-color: #f8f8f8; /* 奇数行背景色 */ } .tr:nth-child(even) { background-color: #ffffff; /* 偶数行背景色 */ } js: Page({ data: { dataList: [], loading: false, noMoreData: false, currentPage: 1, pageSize: 10, totalRecords: 0, totalPages: 0, numList: Array.from({ length: 44 }, (_, i) => i + 1) }, onLoad: function() { this.loadMoreData(); }, touch_add() { if (this.data.currentPage < this.data.totalPages) { this.setData({ currentPage: this.data.currentPage + 1 }, () => { this.loadMoreData(); }); } }, touch_reduce() { if (this.data.currentPage > 1) { this.setData({ currentPage: this.data.currentPage - 1 }, () => { this.loadMoreData(); }); } }, loadMoreData: function() { if (this.data.loading || this.data.noMoreData) { return; } this.setData({ loading: true }); wx.request({ url: 'http://127.0.0.1:5000/all', data: { page: this.data.currentPage, per_page: this.data.pageSize }, method: 'GET', success: (res) => { const newData = res.data.data; const newTotalRecords = res.data.pagination.total_records; const newTotalPages = res.data.pagination.total_pages; this.setData({ dataList: this.data.dataList.concat(newData), currentPage: this.data.currentPage, totalRecords: newTotalRecords, totalPages: newTotalPages, loading: false }); if (this.data.currentPage > newTotalPages) { this.setData({ noMoreData: true }); } }, fail: (err) => { console.error(err); this.setData({ loading: false }); } }); } });