微信小程序表格列冻结功能的实现

**由于公司项目功能需求：查询日考勤报表，如图，用户需要增加横向滚动功能，重点是冻结年月日这列，就像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; }

微信小程序表格列冻结功能的实现相关推荐

nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
微信小程序可以实现很多功能
微信小程序可以实现很多功能,今天就教大家如何利用小程序插件来实现这些功能: 1.直播你可以在「上线了」选择一个电商(或超级云名片-电商版)小程序模板,在"应用中心"里添加小程序 ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
微信小程序实现替换logo功能
1.背景产品觉得用公司logo生成的的二维码太丑觉得橘黄色和黑色不搭配,希望替换logo,在此之前,我也是没有做过这个功能的,于是我查阅了大量资料.加上自己的代码,实现了这个功能.实现的效果如下 ...
微信小程序实现时间预约功能
微信小程序实现时间预约功能类似这样 1.wxml  <view class='containt'>&l ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...

微信小程序表格列冻结功能的实现

微信小程序表格列冻结功能的实现

微信小程序表格列冻结功能的实现相关推荐

最新文章

热门文章