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

news2024/12/25 13:46:19

(一)

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 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.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.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.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>

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;
}

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)
  },

})

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.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>

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; */
}

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)
  },


})

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.是员工考勤表的升级版
实现原理是使用 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>

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; */
}

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.是员工考勤表的 最终版！！！
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>

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;
}

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 () {
 
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1060231.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

代码随想录 Day10 栈与队列 LeetCode T239 滑动窗口的最大值 T347 前K个高频元素

代码随想录 Day10 栈与队列 LeetCode T239 滑动窗口的最大值 T347 前K个高频元素

简要介绍一下单调队列和优先级队列的不同 元素顺序的处理&#xff1a;单调队列中&#xff0c;元素的顺序是单调的&#xff0c;也就是说&#xff0c;队列中的元素按照特定的单调性&#xff08;递增或递减&#xff09;排列。这种特性使得单调队列在处理一些问题时非常高效&#…
阅读更多...
【LeetCode热题100】--114.二叉树展开为链表

【LeetCode热题100】--114.二叉树展开为链表

114.二叉树展开为链表 方法一&#xff1a;对二叉树进行先序遍历&#xff0c;得到各个节点被访问到的顺序&#xff0c;利用数组存储下来&#xff0c;然后在先序遍历之后更新每个节点的左右节点的信息&#xff0c;将二叉树展开为链表 /*** Definition for a binary tree node.* …
阅读更多...
【ONE·Linux || 多线程（二）】

【ONE·Linux || 多线程（二）】

总言 多线程&#xff1a;生产者消费者模型与两种实现方式&#xff08;条件变量、信号量&#xff09;、线程池。 文章目录 总言4、生产者消费者模型4.1、基本概念4.2、基于BlockingQueue的生产者消费者模型&#xff08;理解条件变量&#xff09;4.2.1、单生产者单消费者模式&am…
阅读更多...
【算法训练-数组 三】【数组矩阵】螺旋矩阵、搜索二维矩阵

【算法训练-数组 三】【数组矩阵】螺旋矩阵、搜索二维矩阵

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是螺旋矩阵&#xff0c;使用【二维数组】这个基本的数据结构来实现 螺旋矩阵【EASY】 二维数组的结构特性入手 题干 解题思路 根据题目示例 mat…
阅读更多...
WEB3 创建React前端Dapp环境并整合solidity项目，融合项目结构便捷前端拿取合约 Abi

WEB3 创建React前端Dapp环境并整合solidity项目，融合项目结构便捷前端拿取合约 Abi

好 各位 经过我们上文 WEB3 solidity 带着大家编写测试代码 操作订单 创建/取消/填充操作 我们自己写了一个测试订单业务的脚本 没想到运行的还挺好的 那么 今天开始 我们就可以开始操作我们前端 Dapp 的一个操作了 在整个过程中 确实是没有我们后端的操作 或者说 我们自己就…
阅读更多...
延迟队列

延迟队列

KEYS命令和SCAN命令都可以用于在Redis中查找匹配指定模式的键名&#xff0c;但它们之间有以下区别&#xff1a; 1. 阻塞 vs 非阻塞&#xff1a;KEYS命令是一个阻塞操作&#xff0c;它会遍历整个键空间来查找与给定模式匹配的键名。在执行KEYS命令期间&#xff0c;Redis服务器会…
阅读更多...
oracle linux8.8上安装oracle 19c集群

oracle linux8.8上安装oracle 19c集群

1、操作系统版本告警 处理办法&#xff1a;export CV_ASSUME_DISTIDRHEL7.6 2、ssh互信故障 查看ssh版本 [rootdb1 ~]# ssh -V OpenSSH_8.0p1, OpenSSL 1.1.1k FIPS 25 Mar 2021 处理办法-2个节点都需要操作 安装前配置 # mv /usr/bin/scp /usr/bin/scp.orig # echo "…
阅读更多...
以太网基础学习（四）——IP协议

以太网基础学习（四）——IP协议

一 、IP协议概述 IP&#xff08;Internet Protocol&#xff0c;互联网协议&#xff09;是互联网通信的基础协议&#xff0c;它负责将数据包从源地址传输到目的地址。IP协议定义了如何封装数据包&#xff0c;如何寻址数据包以及如何路由数据包&#xff0c;它是随着互联网的出现而…
阅读更多...
[VIM]spcaevim

[VIM]spcaevim

Home | SpaceVim SpaceVim - 知乎 关于Vim/Neovim/SpaceVim的一些思考 - 知乎 vim高配版(1) – SpaceVim 简介 SpaceVim 是国内的一个大佬将一些NB的插件整合到一起的一个插件包. 一键式安装, 功能强大. 官网参见 Home | SpaceVim vim高配版(2) – vimplus 简介 vimplu…
阅读更多...
小谈设计模式（16）—抽象工厂模式

小谈设计模式（16）—抽象工厂模式

小谈设计模式&#xff08;16&#xff09;—抽象工厂模式 专栏介绍专栏地址专栏介绍 抽象工厂模式结构抽象工厂&#xff08;AbstractFactory&#xff09;具体工厂&#xff08;ConcreteFactory&#xff09;抽象产品&#xff08;AbstractProduct&#xff09;具体产品&#xff08;C…
阅读更多...
解决每次重启ganache虚拟环境，十个账号秘钥都会改变问题

解决每次重启ganache虚拟环境，十个账号秘钥都会改变问题

很多时候 我们启动一个 ganache 环境 然后 通过私钥 在 MetaMask 中 导入用户 但是 当我们因为 电脑要关机呀 或者 ETH 消耗没了呀 那我们就不得不重启一个ganache虚拟环境 然后 你在切一下网络 让它刷新一下 你就会发现 上一次导入的用户就没有了 这是因为 你每次 ganache…
阅读更多...
Ae 效果：CC Power Pin

Ae 效果：CC Power Pin

扭曲/CC Power Pin Distort/CC Power Pin CC Power Pin &#xff08;CC 强力边角定位&#xff09;与同组内的边角定位 Corner Pin效果非常类似&#xff0c;常用于对源图像的透视扭曲变形和四点跟踪合成。使用 CC Power Pin 会有更多的调整属性和更直观的操作。 ◆ ◆ ◆ 效果…
阅读更多...
RobotFramework流程控制(最新版本)

RobotFramework流程控制(最新版本)

文章目录 一 分支流程1. 关键字&#xff1a;Run Keyword If2. 关键字&#xff1a;IF/ELSE3. 嵌套IF/ELSE4. 关键字&#xff1a;Set Variable If 二 循环流程1. 普通FOR循环2. 嵌套FOR循环3. 退出循环4. 其它常用循环 一 分支流程 1. 关键字&#xff1a;Run Keyword If Run Key…
阅读更多...
2023年10月4日

2023年10月4日

服务器 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);//此时&#xff0c;服务器已经成功进入监听状态&…
阅读更多...
Docker通过Dockerfile创建Redis、Nginx--详细过程

Docker通过Dockerfile创建Redis、Nginx--详细过程

创建Nginx镜像 我们先创建一个目录&#xff0c;在目录里创建Dockerfile [rootdocker-3 ~]# mkdir mynginx [rootdocker-3 ~]# cd mynginx [rootdocker-3 ~]# vim Dockerfile Dockerfile的内容 FROM daocloud.io/library/centos:7 RUN buildDepsreadline-devel pcre-devel o…
阅读更多...
Ventoy万能U盘安装系统，支持任何的操作系统安装

Ventoy万能U盘安装系统，支持任何的操作系统安装

Ventoy万能U盘安装系统&#xff0c;支持任何的操作系统安装&#xff1a; Download . VentoyVentoy is an open source tool to create bootable USB drive for ISO files. With ventoy, you dont need to format the disk again and again, you just need to copy the iso fil…
阅读更多...
【网络安全---ICMP报文分析】Wireshark教程----Wireshark 分析ICMP报文数据试验

【网络安全---ICMP报文分析】Wireshark教程----Wireshark 分析ICMP报文数据试验

一&#xff0c;试验环境搭建 1-1 试验环境示例图 1-2 环境准备 两台kali主机&#xff08;虚拟机&#xff09; kali2022 192.168.220.129/24 kali2022 192.168.220.3/27 1-2-1 网关配置&#xff1a; 编辑-------- 虚拟网路编辑器 更改设置进来以后 &#xff0c;先选择N…
阅读更多...
基于SSM的宿舍管理系统

基于SSM的宿舍管理系统

基于SSM的学生宿舍管理系统的设计与实现&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 系统主要分学生和管理员两个角色&#xff0c;功能有…
阅读更多...
RSA攻击：模数分解

RSA攻击：模数分解

目录 一、模数分解总览 1.1直接分解法 1.2费马分解与Pollard_rho分解 1.3公约数分解 1.4其他模数分解 二、实战特训 2.1[黑盾杯 2020]Factor 2.2[GWCTF 2019]babyRSA 2.3[LitCTF 2023]yafu (中级) 2.4[RoarCTF 2019]RSA 2.5[CISCN 2022 西南]rsa 三、总结 一、模数分解总览 …
阅读更多...
进程调度的时机，切换与过程以及方式

进程调度的时机，切换与过程以及方式

1.进程调度的时机 进程调度&#xff08;低级调度〉&#xff0c;就是按照某种算法从就绪队列中选择一个进程为其分配处理机。 1.需要进行进程调度与切换的情况 1.当前运行的进程主动放弃处理机 进程正常终止运行过程中发生异常而终止进程主动请求阻塞&#xff08;如等待l/O)…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023