.axml代码
<view class="wrap" style="z-index:999">
<scroll-view scroll-x="{{true}}" class="scroll" scroll-y="{{true}}">
<view class="table">
<view class="theader flex" style="position: {{position}}">
<view
class="th font-weight-bold "
a:for="{{labelList}}"
key="{{index}}"
style="width: {{labelList.length > 4 ? '170rpx' :`${100/labelList.length}%`}}"
>
<view class="th-item">
{{item.label}}
</view>
</view>
</view>
<view class="tbody flex">
<block a:if="{{propList.length > 0}}">
<view
a:for="{{propList}}"
key="{{index}}"
class="tr flex"
onTap="openModal"
data-attr="{{index}}"
>
<view
class="td"
style="width: {{labelList.length > 4 && abelList.length !== 0 ? '170rpx' :`${100/labelList.length}%`}}"
a:for="{{labelList}}"
a:for-item="itm"
a:for-index="idx"
key="{{idx}}"
>
<view class="td-item" >
{{item[itm.prop]}}
</view>
</view>
</view>
</block>
<view a:else class="noData">暂无数据</view>
</view>
<view class="tfooter" a:if="{{summationData.length > 0}}">
<view class="tr flex">
<view
class="td"
a:for="{{summationData}}"
key="{{index}}"
style="width: {{summationData.length > 4 ? '170rpx' :`${100/labelList.length}%`}}"
>
<view class="td-item">{{item}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
.css代码
.wrap {
margin: 50rpx 20rpx;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 5rpx 10rpx rgba(25, 31, 37, .08);
overflow: hidden;
border-radius: 0;
}
.scroll {
max-height: calc(52vh - 120rpx);
box-sizing: border-box;
overflow: auto!important;
}
.table {
width: auto;
}
.theader {
/* position: sticky; */
top: 0;
left: 0;
width: 100%;
background-color: rgb(239, 247, 255);
}
.tbody {
flex-direction: column;
}
.th, .td {
min-width: 25%;
flex-wrap: nowrap;
text-align: center;
box-sizing: border-box;
}
.th {
font-size: 28rpx;
}
.th-item {
padding: 20rpx 8rpx 16rpx;
background-color: rgb(239, 247, 255);
}
.td-item {
padding: 16rpx 8rpx;
font-size: 26rpx;
}
.tr:nth-child(2n) .td {
background-color: rgb(255, 249, 244, 1);
}
.tr:nth-child(2n+1) .td {
background-color: #fff;
}
.tfooter {
position: sticky;
width: 100%;
bottom: -1px;
}
.tfooter .td {
background-color: rgb(245, 247, 250)!important;
}
.left-view {
padding-bottom: 30rpx;
text-align: center;
font-size: 26rpx;
color: #999;
}
/*暂无数据*/
.noData {
min-height: 150rpx;
text-align: center;
line-height: 150rpx;
font-size: 28rpx;
color: #999;
}
.flex {
display: flex;
display: -webkit-flex;
}
.font-weight-bold {
font-weight: bold;
}
.js代码
labelList: [
{
label: '姓名',
prop: 'username'
},
{
label: '日期',
prop: 'name'
},
{
label: '成绩',
prop: 'performance'
},
{
label: '证书',
prop: 'zhengs'
}
],
position: 'sticky', // 固定表头
propList: [
], // 列表数据
summationData: [], // 合计数据
marqueeProps: {
loop: true,
leading: 1000,
trailing: 800,
fps: 40,
},
index: 0,
show: false