小程序table表头固定，左右滑动
作者：互联网
效果一：
wxml
<!-- <view class='table'>
左侧固定
<view class='table_left_column'>
<view class='left_col_item'>排班</view>
<view class='left_col_item' style="height:{{timeHeight1}}px">上午</view>
<view class='left_col_item' style="height:{{timeHeight2}}px">下午</view>
<view class='left_col_item' style="height:{{timeHeight3}}px">晚上</view>
</view>
右侧表格滚动
<view class="table_right_scroll_box">
<block wx:for="{{list}}" wx:for-index="index" wx:key="index">
<view class='table_tr_item tableRow{{index}}'>
<block wx:for="{{item.data}}" wx:for-item="ditem" wx:for-index="dindex" wx:key="dindex">
<view wx:if="{{index == 0}}" class='tr_th tr_td'>
<view class="">{{ditem.date}}</view>
<view class="">{{ditem.day}}</view>
</view>
<view wx:else class='tr_td'>
<block wx:for="{{ditem.userList}}" wx:for-item="uitem" wx:for-index="uindex" wx:key="uindex">
<view class="tr_td_row">{{uitem.name}}</view>
</block>
</view>
</block>
</view>
</block>
</view>
</view> -->
<view class='table'>
<!-- 左侧固定 -->
<view class='table_left_column'>
<view class='left_col_item'>排班</view>
<view class='left_col_item' style="height:{{timeHeight1}}px">上午</view>
<view class='left_col_item' style="height:{{timeHeight2}}px">下午</view>
<view class='left_col_item' style="height:{{timeHeight3}}px">晚上</view>
</view>
<!-- 右侧表格滚动 -->
<view class="table_right_scroll_box">
<block wx:for="{{list}}" wx:for-index="index" wx:key="index">
<view class='table_tr_item tableRow{{index}}'>
<view class="tr_td">{{item.time}}</view>
<block wx:for="{{item.data}}" wx:for-item="ditem" wx:for-index="dindex" wx:key="dindex">
<view wx:if="{{index == 0}}" class='tr_th tr_td'>
<view class="">{{ditem.date}}</view>
<view class="">{{ditem.day}}</view>
</view>
<view wx:else class='tr_td'>
<block wx:for="{{ditem.userList}}" wx:for-item="uitem" wx:for-index="uindex" wx:key="uindex">
<view class="tr_td_row">{{uitem.name}}</view>
</block>
</view>
</block>
</view>
</block>
</view>
</view>
css
page {
background: #f3f3f3;
font-size: 30rpx;
}
.table {
display: flex;
background: white;
border: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 0;
}
.table_left_column {
width: 100rpx;
height: auto;
display: flex;
flex-direction: column;
}
.left_col_item {
width: 100rpx;
min-height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 1rpx solid #e5e5e5;
color: #000;
font-weight: bolder;
}
.table_right_scroll_box {
width: 1400rpx;
height: auto;
white-space: nowrap;
overflow-x: scroll;
border-left: 1rpx solid #e5e5e5;
font-weight: normal;
}
.table_tr_item {
width: 1400rpx;
display: flex;
flex-direction: row;
}
.tr_th {
background: rgba(241, 252, 255, 1);
}
.tr_th view:last-child {
font-size: 25rpx;
}
.tr_td {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 200rpx;
min-height: 90rpx;
border: 1rpx solid rgba(218, 217, 217, 1);
border-top: 0;
border-left: 0;
}
.tr_td_row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 60rpx;
color: rgba(55, 134, 244, 0.8);
flex-basis: auto;
flex-grow: 1;
-webkit-flex-grow: 1;
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}
.tr_td_row:last-child {
border-bottom: none;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
timeHeight1:0,
timeHeigh2:0,
timeHeigh3:0,
list: [
{
time: '排班',
data: [{
date: '周一',
day: '04/25',
userList: []
},
{
date: '周二',
day: '04/26',
userList: []
},
{
date: '周三',
day: '04/27',
userList: []
},
{
date: '周四',
day: '04/28',
userList: []
},
{
date: '周五',
day: '04/29',
userList: []
},
{
date: '周六',
day: '04/30',
userList: []
},
{
date: '周日',
day: '05/01',
userList: []
}
]
},
{
time: '上午',
data: [{
date: '周一',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周二',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周三',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周四',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周五',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周六',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周日',
day: '00/00',
teacher: []
}
]
},
{
time: '下午',
data: [{
date: '周一',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周二',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周三',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周四',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周五',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周六',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周日',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
}]
}
]
},
{
time: '晚上',
data: [{
date: '周一',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周二',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
},
{
code: '000',
name: '值班人'
}
]
},
{
date: '周三',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
}]
},
{
date: '周四',
day: '00/00',
userList: []
},
{
date: '周五',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
}]
},
{
date: '周六',
day: '00/00',
userList: [{
code: '000',
name: '值班人'
}]
},
{
date: '周日',
day: '00/00',
userList: []
}
]
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
let query = wx.createSelectorQuery();
query.select('.tableRow1').boundingClientRect(rect => {
//获取到元素
let height = rect.height;
//给页面赋值
this.setData({
timeHeight1: height - 1 //不减1 边框线对不齐
})
}).exec();
query.select('.tableRow2').boundingClientRect(rect => {
let height = rect.height;
this.setData({
timeHeight2: height - 1
})
}).exec();
query.select('.tableRow3').boundingClientRect(rect => {
let height = rect.height;
this.setData({
timeHeight3: height - 1
})
}).exec();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果二：
<view class='table'>
<!-- 左侧固定 -->
<view class='table_left_column'>
<view class='left_col_item'>品种</view>
<view class='left_col_item' wx:for="{{fruitTypeList}}" wx:for-index="index" wx:key="index">{{item.typeName}}</view>
</view>
<!-- 右侧表格滚动 -->
<view class="table_right_scroll_box">
<view class="flex_direction_column_item" wx:for="{{fruitList}}" wx:for-index="index" wx:key="index">
<view class='item_name'>{{item.name}}</view>
<view wx:for="{{item.list}}" wx:for-item="litem" wx:for-index="lindex" wx:key="lindex" class='item_name item_price'>
<block wx:if="{{litem.price !='缺货'}}">¥{{litem.price}}/斤</block>
<block wx:else>缺货</block>
</view>
</view>
</view>
</view>
page {
background: #f3f3f3;
font-size: 30rpx;
}
.table {
display: flex;
background: white;
border: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 0;
}
.table_left_column {
min-width: 150rpx;
height: auto;
display: flex;
flex-direction: column;
}
.left_col_item {
width: 100%;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 1rpx solid #e5e5e5;
color: #000;
font-weight: bolder;
}
.table_right_scroll_box {
display: flex;
white-space: nowrap;
overflow-x: scroll;
border-left: 1rpx solid #e5e5e5;
font-weight: normal;
/* border: 1px solid red; */
}
.flex_direction_column_item {
min-width: 200rpx;
display: inline-block;
/* border: 1px solid #000; */
}
.item_name {
min-width: 200rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: bolder;
color: rebeccapurple;
border-right: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
}
.item_price {
color: #7c2929;
letter-spacing: 1rpx;
}
data: {
fruitTypeList: [{
"fruitTypeId": 1,
"typeName": "苹果"
},
{
"fruitTypeId": 2,
"typeName": "香蕉"
},
{
"fruitTypeId": 3,
"typeName": "橙子"
},
{
"fruitTypeId": 4,
"typeName": "山竹"
},
{
"fruitTypeId": 5,
"typeName": "荔枝"
}, {
"fruitTypeId": 6,
"typeName": "芒果"
},
{
"fruitTypeId": 7,
"typeName": "西瓜"
},
{
"fruitTypeId": 8,
"typeName": "草莓"
},
{
"fruitTypeId": 9,
"typeName": "水蜜桃"
},
{
"fruitTypeId": 10,
"typeName": "李子"
},
{
"fruitTypeId": 11,
"typeName": "榴莲"
},
{
"fruitTypeId": 12,
"typeName": "蓝莓"
},
{
"fruitTypeId": 13,
"typeName": "柚子"
},
{
"fruitTypeId": 14,
"typeName": "木瓜"
},
],
fruitList: [{
"name": "果唯伊水果",
"list": [{
"pkId": 1,
"price": "5.8",
"typeName": "苹果"
},
{
"pkId": 2,
"price": "2.08",
"typeName": "香蕉"
},
{
"pkId": 3,
"price": "6.00",
"typeName": "橙子"
},
{
"pkId": 4,
"price": "8.40",
"typeName": "山竹"
},
{
"pkId": 5,
"price": "15",
"typeName": "荔枝"
},
{
"pkId": 6,
"price": "5.8",
"typeName": "芒果"
},
{
"pkId": 7,
"price": "2.10",
"typeName": "西瓜"
},
{
"pkId": 8,
"price": "6.00",
"typeName": "草莓"
},
{
"pkId": 9,
"price": "8.00",
"typeName": "水蜜桃"
},
{
"pkId": 10,
"price": "7.80",
"typeName": "李子"
},
{
"pkId": 11,
"price": "缺货",
"typeName": "榴莲"
},
{
"pkId": 12,
"price": "4.08",
"typeName": "蓝莓"
},
{
"pkId": 13,
"price": "2.80",
"typeName": "柚子"
},
{
"pkId": 14,
"price": "8.00",
"typeName": "木瓜"
},
]
},
{
"name": "恋果",
"list": [{
"pkId": 1,
"price": "5.40",
"typeName": "苹果"
},
{
"pkId": 2,
"price": "2.20",
"typeName": "香蕉"
},
{
"pkId": 3,
"price": "缺货",
"typeName": "橙子"
},
{
"pkId": 4,
"price": "9.00",
"typeName": "山竹"
},
{
"pkId": 5,
"price": "14.00",
"typeName": "荔枝"
},
{
"pkId": 6,
"price": "5.50",
"typeName": "芒果"
},
{
"pkId": 7,
"price": "1.89",
"typeName": "西瓜"
},
{
"pkId": 8,
"price": "6.35",
"typeName": "草莓"
},
{
"pkId": 9,
"price": "8.20",
"typeName": "水蜜桃"
},
{
"pkId": 10,
"price": "8.60",
"typeName": "李子"
},
{
"pkId": 11,
"price": "24.60",
"typeName": "榴莲"
},
{
"pkId": 12,
"price": "4.56",
"typeName": "蓝莓"
},
{
"pkId": 13,
"price": "3.60",
"typeName": "柚子"
},
{
"pkId": 14,
"price": "7.20",
"typeName": "木瓜"
},
],
},
{
"name": "百果园",
"list": [{
"pkId": 1,
"price": "6.10",
"typeName": "苹果"
},
{
"pkId": 2,
"price": "2.30",
"typeName": "香蕉"
},
{
"pkId": 3,
"price": "缺货",
"typeName": "橙子"
},
{
"pkId": 4,
"price": "9.00",
"typeName": "山竹"
},
{
"pkId": 5,
"price": "14.30",
"typeName": "荔枝"
},
{
"pkId": 6,
"price": "5.65",
"typeName": "芒果"
},
{
"pkId": 7,
"price": "2.08",
"typeName": "西瓜"
},
{
"pkId": 8,
"price": "6.60",
"typeName": "草莓"
},
{
"pkId": 9,
"price": "7.80",
"typeName": "水蜜桃"
},
{
"pkId": 10,
"price": "8.2",
"typeName": "李子"
},
{
"pkId": 11,
"price": "23.8",
"typeName": "榴莲"
},
{
"pkId": 12,
"price": "4.36",
"typeName": "蓝莓"
},
{
"pkId": 13,
"price": "3.20",
"typeName": "柚子"
},
{
"pkId": 14,
"price": "8.00",
"typeName": "木瓜"
},
]
},
{
"name": "鲜丰水果",
"list": [{
"pkId": 1,
"price": "4.80",
"typeName": "苹果"
},
{
"pkId": 2,
"price": "1.98",
"typeName": "香蕉"
},
{
"pkId": 3,
"price": "5.20",
"typeName": "橙子"
},
{
"pkId": 4,
"price": "8.25",
"typeName": "山竹"
},
{
"pkId": 5,
"price": "缺货",
"typeName": "荔枝"
},
{
"pkId": 6,
"price": "5.8",
"typeName": "芒果"
},
{
"pkId": 7,
"price": "2.28",
"typeName": "西瓜"
},
{
"pkId": 8,
"price": "6.40",
"typeName": "草莓"
},
{
"pkId": 9,
"price": "8.60",
"typeName": "水蜜桃"
},
{
"pkId": 10,
"price": "15",
"typeName": "李子"
},
{
"pkId": 11,
"price": "29.6",
"typeName": "榴莲"
},
{
"pkId": 12,
"price": "缺货",
"typeName": "蓝莓"
},
{
"pkId": 13,
"price": "4.10",
"typeName": "柚子"
},
{
"pkId": 14,
"price": "6.80",
"typeName": "木瓜"
},
]
}
]
},
版本三：
1.左侧固定
2.右侧表格左右滚动
3.td 单元格里面没有行 单纯放一条数据
<view class='table'>
<!-- 左侧固定 -->
<view class='table_left_column'>
<view class='left_col_item'>时间日期</view>
<block wx:for="{{list}}" wx:for-index="index" wx:key="index">
<view class='left_col_item'>{{item.date}}</view>
</block>
</view>
<!-- 右侧表格滚动 -->
<view class="table_right_scroll_box">
<view class="table_tr_item">
<view class="tr_td">姓名</view>
<view class="tr_td">工号</view>
<view class="tr_td">星期</view>
<view class="tr_td">上班时间</view>
<view class="tr_td">下班时间</view>
<view class="tr_td">迟到</view>
<view class="tr_td">早退</view>
<view class="tr_td">备注</view>
</view>
<block wx:for="{{list}}" wx:for-index="index" wx:key="index">
<view class='table_tr_item'>
<view class='tr_td'>{{item.name}}</view>
<view class='tr_td'>{{item.jobNumber}}</view>
<view class='tr_td'>{{item.week}}</view>
<view class='tr_td'>{{item.upTime}}</view>
<view class='tr_td'>{{item.belowTime}}</view>
<view class='tr_td' style="color: red;">{{item.lateTime}}</view>
<view class='tr_td' style="color: red;">{{item.earlyTime}}</view>
<view class='tr_td'>{{item.comment}}</view>
</view>
</block>
</view>
</view>
page {
background: #f3f3f3;
font-size: 28rpx;
font-weight: normal;
}
.table {
display: flex;
background: white;
border: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 0;
}
.table_left_column {
width: 180rpx;
height: auto;
display: flex;
flex-direction: column;
}
.left_col_item {
width: 180rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 1rpx solid #e5e5e5;
}
.table_right_scroll_box {
white-space: nowrap;
overflow-x: scroll;
border-left: 1rpx solid #e5e5e5;
font-weight: normal;
}
.table_tr_item {
width: 1200rpx;
display: flex;
flex-direction: row;
/* border: 1px solid red; */
}
.tr_td {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 150rpx;
height: 60rpx;
border: 1rpx solid rgba(218, 217, 217, 1);
border-top: 0;
border-left: 0;
/* border-right: 0; */
}
list: [
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
}
]
版本四：
头部和首列固定
<input style="width: 100%;height: 92rpx;border: 1rpx solid #ecf1f8;" auto-focus placeholder="请输入员工编号" />
<button>查询</button>
<view style="border: 1rpx solid #ecf1f8;border-bottom: 0;">
<scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
<view class="table__head" catchtouchmove='catchTouchMove'>
<view class="table__head__td" wx:for="{{headList}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
<text class="table__head__td__text">{{attrItem.title}}</text>
</view>
</view>
</scroll-view>
<scroll-view scroll-y="true" class="table" style="height:{{totalHeight}}rpx;" bindscrolltolower="handleScrollToLower">
<scroll-view scroll-x="true" bindscroll="scrollX">
<view class="table__row" wx:for="{{list}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem">
<text class="table__row__td">{{dataItem.date}}</text>
<text class="table__row__td">{{dataItem.name}}</text>
<text class="table__row__td">{{dataItem.jobNumber}}</text>
<text class="table__row__td">{{dataItem.week}}</text>
<text class="table__row__td">{{dataItem.upTime}}</text>
<text class="table__row__td">{{dataItem.belowTime}}</text>
<text class="table__row__td" style="color: red;">{{dataItem.lateTime}}</text>
<text class="table__row__td" style="color: red;">{{dataItem.earlyTime}}</text>
<text class="table__row__td">{{dataItem.comment}}</text>
</view>
</scroll-view>
</scroll-view>
</view>
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.table__head{
position: sticky;
top: 0rpx;
z-index: 100;
width: 1380rpx;
height: 60rpx;
line-height: 60rpx;
display: flex;
white-space: nowrap;
font-size: 24rpx;
color: #aaabbd;
border-bottom: 2rpx solid #ecf1f8;
background-color: #fff;
}
.table__head__td{
position: relative;
width: 150rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
/* border-right: 2rpx solid #ecf1f8; */
}
.table__head__td:nth-child(1) {
width: 180rpx;
position: sticky;
z-index: 101;
left: 0rpx;
}
.table__head__td__text{
display: inline;
}
.table{
display: block;
position: relative;
overflow: scroll;
width: 100%;
height: 100vh;
}
.table__row{
width: 1380rpx;
height: 60rpx;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
white-space: nowrap;
border-bottom: 2rpx solid #ecf1f8;
}
.table__row__td{
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
position: relative;
display: inline-block;
box-sizing: border-box;
font-size: 26rpx;
background-color: #fff;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
/* border-right: 2rpx solid #ecf1f8; */
}
.table__row__td:nth-child(1) {
width: 180rpx;
position: sticky;
z-index: 10;
left: 0;
}
Page({
data: {
headList: [
{ title: '时间日期' },
{ title: '姓名' },
{ title: '工号' },
{ title: '星期' },
{ title: '上班时间' },
{ title: '下班时间' },
{ title: '迟到' },
{ title: '早退' },
{ title: '备注' },
],
scrollLeft: 0,
totalHeight: 0,
list: [
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
}
]
},
//禁止滚动
catchTouchMove(){
return false;
},
//监听左右滚动
scrollX(e) {
if(e.detail.scrollLeft > 0){
this.setData({
scrollLeft: e.detail.scrollLeft,
});
} else {
this.setData({
scrollLeft: 0,
});
}
},
//触底事件
handleScrollToLower(e){
if(e.detail.direction == 'bottom') {
console.log('scroll-view触底事件在这里处理加载下一页数据')
}
},
//页面加载时获取系统页面高度计算出表格高度
onl oad() {
wx.getSystemInfo({
success:(res)=> {
this.setData({
totalHeight: res.windowHeight * 2 - 244
})
}
})
},
})
版本五：
1.固定表头和表格首列 右侧表格可以左右滚动
2.是员工考勤表的 最终版！！！
position: sticky;粘性定位固定首列和表头 仅仅是使用一个 scroll-view 滑块就能实现表头和表格内容左右滑动保持一致！解决表头和内容对不上 表头反应慢问题！！！
<view class="container">
<view class="head__search">
<view class="search__row">
<icon class="icon-small" type="search" size="14"></icon>
<input class="search__input" type="number" confirm-type="search" placeholder="请输入员工编号" />
</view>
</view>
<view class="head___btn">
<button type="primary">查询</button>
</view>
<view class="table__box">
<scroll-view class="table__scroll" scroll-y scroll-x style="height:{{totalHeight}}px;" bindscrolltolower="handleScrollToLower">
<view class="table__scroll__view">
<view class="table__header">
<view class="table__header__item" wx:for="{{headList}}" wx:key="index">{{item.title}}</view>
</view>
<view class="table__content">
<view class="table__content__line" wx:for="{{list}}" wx:key="index" wx:for-item="dataItem">
<view class="table__content__line__item">{{dataItem.date}}</view>
<view class="table__content__line__item">{{dataItem.name}}</view>
<view class="table__content__line__item">{{dataItem.jobNumber}}</view>
<view class="table__content__line__item">{{dataItem.week}}</view>
<view class="table__content__line__item">{{dataItem.upTime}}</view>
<view class="table__content__line__item">{{dataItem.belowTime}}</view>
<view class="table__content__line__item" style="color: red;">{{dataItem.lateTime}}</view>
<view class="table__content__line__item" style="color: red;">{{dataItem.earlyTime}}</view>
<view class="table__content__line__item">{{dataItem.comment}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
page {
background-color: #f8f8f8;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.container {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.head__search {
width: 100%;
padding: 30rpx 30rpx;
background-color: #f8f8f8;
position: fixed;
top: 0;
z-index: 999;
}
.search__row {
width: 100%;
height: 70rpx;
padding: 18rpx 0rpx 18rpx 24rpx;
box-sizing: border-box;
display: flex;
align-items: center;
background: #FFFFFF;
border: 1rpx solid #E4E4E4;
border-width: thin;
}
.search__input {
width: 100%;
margin-left: 20rpx;
font-size: 26rpx;
font-family: PingFang;
font-weight: 500;
}
.head___btn {
width: 100%;
height: 90rpx;
position: fixed;
top: 125rpx;
z-index: 999;
}
.table__box {
width: 100%;
height: auto;
box-sizing: border-box;
position: relative;
top: 230rpx;
z-index: 999;
border: 1px solid #E4E4E4;
}
.table__scroll {
overflow: hidden;
background: #FFF;
}
.table__header {
width: 1380rpx;
position: sticky;
top: 0;
z-index: 999;
display: grid; /* 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: 150rpx;
height: 60rpx;
position: relative;
z-index: 888;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
}
.table__header__item:nth-child(1) {
width: 180rpx;
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: 1380rpx;
display: grid;
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;
width: 150rpx;
height: 60rpx;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
font-size: 26rpx;
}
.table__content__line__item:nth-child(1) {
width: 180rpx;
position: sticky;
left: 0;
}
// pages/test3/index.js
Page({
/**
* 页面的初始数据
*/
data: {
totalHeight:0,
headList: [
{ title: '时间日期' },
{ title: '姓名' },
{ title: '工号' },
{ title: '星期' },
{ title: '上班时间' },
{ title: '下班时间' },
{ title: '迟到' },
{ title: '早退' },
{ title: '备注' },
],
list: [
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
},
{
date:'2022-04-01',
name:'李易峰',
jobNumber:'0957',
week:'星期一',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-02',
name:'李易峰',
jobNumber:'0957',
week:'星期二',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-03',
name:'李易峰',
jobNumber:'0957',
week:'星期三',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-04',
name:'李易峰',
jobNumber:'0957',
week:'星期四',
upTime:'08:30:43',
belowTime:'18:01:56',
lateTime:'30:43',
earlyTime:'',
comment:'',
},
{
date:'2022-04-05',
name:'李易峰',
jobNumber:'0957',
week:'星期五',
upTime:'07:59:43',
belowTime:'17:00:00',
lateTime:'',
earlyTime:'60:00',
comment:'',
},
{
date:'2022-04-06',
name:'李易峰',
jobNumber:'0957',
week:'星期六',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'调休',
},
{
date:'2022-04-07',
name:'李易峰',
jobNumber:'0957',
week:'星期日',
upTime:'',
belowTime:'',
lateTime:'',
earlyTime:'',
comment:'休息',
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
wx.getSystemInfo({
success:(res)=> {
this.setData({
// totalHeight: (res.windowHeight * 2) - 240
totalHeight: res.windowHeight - 120
})
}
})
},
// 触底事件
handleScrollToLower(e){
if(e.detail.direction == 'bottom') {
console.log('scroll-view触底事件在这里处理加载下一页数据')
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
标签：week,00,name,04,表头,earlyTime,滑动,date,table 来源： https://www.cnblogs.com/weiweiyeyu/p/16461357.html