微信小程序 table表格固定表头和首列右侧表格可以左右滚动

(一)

1.左侧一列固定不动
2.右侧表格内容可以左右滚动
3.单元格内容平均分配
4.每一行行高可以由内容撑开通过 js 设置左侧一列行高与右侧表格内容行高保持一致

1.1 效果图

在这里插入图片描述

1.2 tabble.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.2 tabble.wxss

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

1.3 tabble.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: []
        }
      ]
    }
  ],
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
    // --- start --- 这里的代码  还可以优化的
 
    // 1. 封装一个函数，把这里的代码剪切进去，onReady、onShow 这两个生命周期函数都调用一次函数
    // 2. 使用 延时器包住这里的代码 setTimeout(function () {剪切代码放这里}, 300);
    // 为什么？ 因为（上午、下午、晚上）单元格的高度是计算出来的，如果请求后台接口的数据速度慢 
    // 了，数据还没有渲染出来，这个时候去获取元素.tableRow1/2/3 的高度是不准确的, 所以就有了
    // 上面的2条建议
 
 
    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();
 
 
   // --- end --- 这里代码
 
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406

1.4 tabble2.wxml

如果不想要左侧固定，整个table 表格都可以滚动的那么可以修改结构和样式比如把左侧固定的代码注释掉，在 list 循环下每行再加一个td单元格修改宽度和字体粗细和以前一样的样式
修改前
在这里插入图片描述
修改后

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

(二)

1.左侧固定
2.右侧表格左右滚动
3.td 单元格里面没有行单纯放一条数据
4.适合一个产品，不同商家的价格对比
可以根据需求修改下结构和样式先上效果图看看
在这里插入图片描述

2.1 tabble3.wxml

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 tabble3.wxss

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

2.3 tabble3.js

import fruititData from '../../public/json/tableJson3';
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    timeHeight1:0,
    timeHeigh2:0,
    timeHeigh3:0,
    fruitTypeList: fruititData.fruitTypeList,
    fruitList: fruititData.fruitList,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 console.log("ewd=ew=",fruititData)
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.4 tabbleJson3.js

const 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": "木瓜"
        },
      ]
    }
  ]
}

export default data;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362

(三)

1.左侧固定
2.右侧表格左右滚动
3.td 单元格里面没有行单纯放一条数据
4.适合员工考勤表记录
也是一样的表格，但是数据格式不一样。结构和样式也不一样！这里要特别注意一下
效果图
在这里插入图片描述
(二)和(三) 的表格怎么说数据格式不一样呢？看 js 数据结构或者看两张图就知道了图1循环的是列、图2循环的是行

3.1 tabble4.wxml

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3.2 tabble4.wxss

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; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

3.3 tabble4.js

import fruititData from '../../public/json/tableJson4';
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    timeHeight1:0,
    timeHeigh2:0,
    timeHeigh3:0,
    list: fruititData.list,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 console.log("ewd=ew=",fruititData)
  },


})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.4 tabbleJson4.js

const data = {
  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:'休息',
    }
 
  ]
}

export default data;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318

(四)

1.固定表头和表格首列右侧表格可以左右滚动
2.是员工考勤表的升级版
实现原理是使用 position: sticky;粘性定位固定首列和表头因为表头和表格内容都是使用 scroll-view 滑动的所以当右侧表格左右滚动时 js 监听scroll-view滚动事件获取 scrollLeft 值后设置表头scroll-view标签的scrollLeft 值这样就能将表头和表格内容左右滑动的位置保持一致！
表头和内容是分开的两个scroll-view 不是同一个滑动在真机操作下表头和内容还是有些对不上的，感觉表头反应慢些！能实现效果就是体验感差点
上效果图
在这里插入图片描述

4.1 tabble5.wxml

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

4.2 tabble5.wxss

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; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

4.2 tabble5.js

 
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触底事件在这里处理加载下一页数据')
      }
  },
  //页面加载时获取系统页面高度计算出表格高度
  onLoad() {
    wx.getSystemInfo({
      success:(res)=> {
        this.setData({
          totalHeight: res.windowHeight * 2 - 244
        })
      }
    })
  },
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364

(五)

1.固定表头和表格首列右侧表格可以左右滚动
2.是员工考勤表的最终版！！！
position: sticky;粘性定位固定首列和表头仅仅是使用一个 scroll-view 滑块就能实现表头和表格内容左右滑动保持一致！解决表头和内容对不上表头反应慢问题！！！
上效果图
在这里插入图片描述

5.1 tabble6.wxml

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

5.2 tabble6.wxss

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

5.3 tabble6.js

// 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:'休息',
    }
 
  ]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: 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 () {
 
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403

相关阅读:
【spark客户端】Spark SQL CLI详解：怎么执行sql文件、注释怎么写，支持的文件路径协议、交互式模式使用细节
 盒子模型存在的bug
【漏洞复现】Django_debug page_XSS漏洞(CVE-2017-12794)
汽车自适应巡航系统控制策略研究
 如何在Django中使用django-crontab启动定时任务、关闭任务以及关闭指定任务
 数据结构7---图
 【Go语言精进之路】构建高效Go程序：零值可用、使用复合字面值作为初值构造器
 Spring Bean细节
 【JavaEE初阶】进程篇
 2022 极术通讯-2021中国云数据中心考察报告发布，Arm服务器促进多元算力发展
原文地址：https://blog.csdn.net/qq_36158551/article/details/133551778

微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动

(一)