wxml部分:
<view class="table__scroll__view">
<view class="table__header">
<view class="table__header__item" wx:for="{{TableHeadtitle}}" wx:key="index">{{item.title}}</view>
</view>
<view class="table__content">
<view class="table__content__line">
<view class="table__content__line__item">{{0}}</view>
<view class="table__content__line__item">{{1}}</view>
<view class="table__content__line__item">{{2}}</view>
<view class="table__content__line__item">{{3}}</view>
<view class="table__content__line__item">{{4}}</view>
</view>
</view>
</view>
js部分:
TableHeadtitle: [
{ title: "" },
{ title: "待审核" },
{ title: "已通过" },
{ title: "退回" },
{ title: "总数" },
],
scss部分:
.table__scroll__view{
margin-top: 10px;
.table__header {
width: 100%;
position: sticky;
top: 0;
z-index: 1;
display: flex;
/* display: grid; 网格布局 */
/* grid-auto-flow 属性控制自动放置的项目如何插入网格中 */
/* column 通过填充每一列来放置项目 */
grid-auto-flow: column;
font-size: 26rpx;
font-weight: bold;
color: #333333;
background: #F4F6FF;
.table__header__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
background: #F4F6FF;
width: 55%;
height: 60rpx;
position: relative;
z-index: 888;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
.timeicon {
padding-left: 10rpx;
color: #07b3f5;
font-weight: bold;
font-size: 35rpx;
}
}
.table__header__item:nth-child(n) {
width: 250rpx;
position: sticky;
left: 0;
z-index: 999;
}
}
.table__content {
background-color: #fff;
/* 这是兼容 iPhone x */
padding-bottom: 10rpx;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
.table__content__line {
width: 100%;
display: flex;
grid-auto-flow: column;
position: relative;
}
.table__content__line__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
background-color: #fff;
height: 80rpx;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
font-size: 26rpx;
}
.table__content__line__item:nth-child(n) {
width: 250rpx;
position: sticky;
left: 0;
}
.table__content__line__item:nth-child(1) {
color: rgb(25, 215, 240);
}
.table__content__line__item:nth-child(3) {
font-weight: bold;
color: rgb(78, 142, 182);
}
}
}
效果: