微信小程序表格列冻结功能的实现
**由于公司项目功能需求：查询日考勤报表，如图，用户需要增加横向滚动功能，重点是冻结年月日这列，就像EXCEL那样。
效果如下：
微信小程序表格列冻结功能的实现.mp4
部分关键代码如图：注意table1和table2
<block><scroll-view scroll-x="true" bindscroll="scroll" class='scrollClass1'><view class="table table1"> <view class="tr bg-w"><!-- <view class="th YYMMDD" >月日</view> --><view class="th XQ">星期</view> <view class="th EmpNo">工号</view><view class="th EmpName">姓名</view><view class="th ErrorWhy">异常</view> <view class="th kq">上班1</view><view class="th kq">下班1</view><view class="th kq ">上班2</view> <view class="th kq">下班2</view> <view class="th kq">上班3</view><view class="th kq">下班3</view><view class="th kq">正班时数</view><view class="th LeaveTypeText">请假类别</view> <view class="th overTime">刷卡加班</view> <view class="th">加班申请</view> </view><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>
2部分CSS关键代码：
.table {/* font-size: 24rpx;margin-top: 50rpx;border: 1rpx solid #dadada; */}.table1{/* overflow: hidden; */margin-left: 10rpx;width: 1000px; }.table2{width:100px; }.scrollClass1{position: relative;margin-left: 200rpx;z-index: 100; position: absolute;}.scrollClass{width: 100%;height: 400px; }
