小程序冻结首列代码补充
**
页面
**
月日 星期 工号 姓名 异常 上班1 下班1 上班2 下班2 上班3 下班3 正班时数 请假类别 刷卡加班 加班申请
<block wx:for="{{listData}}" wx:key="unique"><view class="tr bg-g"><view class="td YYMMDD">{{item.YYMMDD}}</view> <view class="td XQ">{{item.XQ}}</view><view class="td EmpNo">{{item.EmpNo}}</view><view class="td EmpName">{{item.EmpName}}</view><view class="td ErrorWhy">{{item.ErrorWhy}}</view><view class="td kq">{{item.GO1}}</view><view class="td kq">{{item.OUT1}}</view><view class="td kq">{{item.GO2}}</view><view class="td kq">{{item.OUT2}}</view><view class="td kq">{{item.GO3}}</view><view class="td kq">{{item.OUT3}}</view><view class="td kq">{{item.WorkTime}}</view><view class="td CSJ_AttDayData">{{item.LeaveTypeText}}</view><view class="td overTime">{{item.OverTime}}</view><view class="td reqOverTime">{{item.ReqOverTime}}</view></view></block> </view></scroll-view><view class='div2'><view class="table table2"><view class="tr bg-w"><view class="th YYMMDD">年月日</view></view><block wx:for="{{listData}}" wx:key="unique"><view class="tr bg-g"><view class="td YYMMDD">{{item.YYMMDD}}</view></view></block></view></view> </block>
**
js
**
data: {
listData: [
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-29”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “-05-30”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
]
},
**
css
**
.table1 {
overflow: hidden;
margin-left: 10rpx;
width: 1000px;
}
.div2 {
position:absolute;
z-index: 102;
}
.table2 {
width: 100px;
}
.scrollClass1 {
position: relative;
margin-left: 30rpx;
z-index: 100;
position: absolute;
}
.scrollClass {
background: yellowgreen;
width: 100%;
height: 400px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.bg-w {
background: teal;
}
.bg-g {
background: red;
}
.th {
width: 100px;
justify-content: center;
background: #fbaf17;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}
.th YYMMDD {
width: 100px;
}
.th XQ {
width: 20px;
}
.th EmpNo {
width: 20px;
}
.th EmpName {
width: 20px;
}
.th ErrorWhy {
width: 20px;
}
.th kq {
width: 30px;
}
.th LeaveTypeText {
width: 30px;
}
.th overTime {
width: 30px;
}
.td {
width: 100px;
justify-content: center;
background: #ddd;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}
.td YYMMDD {
width: 100px;
}
.td XQ {
width: 20px;
}
.td EmpNo {
width: 20px;
}
.td EmpName {
width: 20px;
}
.td ErrorWhy {
width: 20px;
}
.td kq {
width: 30px;
}
.td LeaveTypeText {
width: 30px;
}
.td overTime {
width: 30px;
}
参考:/qq_23907525/article/details/106506758