微信小程序固定表头

采用scroll-view嵌套，实现滚动表格时，表头不停留在页面顶部。

主要是在js中指定tbody的高度：窗口可用高度减去要保留的高度（表头，或表头+标题）；

wxml

<view class='table_title'>本公司共发生{{countNum}}例风险事件</view>
<scroll-view scroll-x="true">
  <view class="table">
    <view class="th">
      <view class="td">营业单位</view>
      <text class="td">风险事件\n发生次数</text>
      <view class="td">损失金额</view>
      <view class="td td-4">RCSA评分结果</view>
    </view>

    <scroll-view scroll-x="true" scroll-y="true" style='height:{{tbodyHeight}}px;' class='tbody_scroll'>
      <block wx:for="{{tableData}}" wx:key="{{item}}">
        <view class="tr bg-tr" wx:if="{{index % 2 == 0}}">
          <view class="td">{{item.bUnit}}</view>
          <view class="td">{{item.rEventNum}}</view>
          <view class="td">{{item.dAmount}}</view>
          <view class="td td-4">{{item.rcsa}}</view>
        </view>

        <view class="tr" wx:else>
          <view class="td">{{item.bUnit}}</view>
          <view class="td">{{item.rEventNum}}</view>
          <view class="td">{{item.dAmount}}</view>
          <view class="td td-4">{{item.rcsa}}</view>
        </view>
      </block>
    </scroll-view>
  </view>
</scroll-view>

wxss

.table_title{
  text-align: center;
  margin-bottom: 15rpx;
}

.table {
  border: 0px solid darkgray;
  margin: 0px;
}

.tbody_scroll{
  width: 750rpx;
}

.th{
  display: flex; 
  width: 750rpx;
  justify-content: flex-start;
  height: 80rpx; 
  align-items: center;
  background: #3366FF;
  color: #fff;
  font-size: 30rpx;
}

.tr {
  display: flex; 
  width: 750rpx;
  justify-content: flex-start;
  height: 60rpx; 
  align-items: center;
  font-size: 20rpx;
}
.td {
  width: 180rpx;
  justify-content: center;
  text-align: center;
}

.bg-tr{
  background: #E6F3F9;
}

.td-4{
  width: 200rpx;
}

js

var schemeCode = 'JSC_ZCFX_FXSJ';
var xedmUrl = getApp().globalData.xedmUrl;
var groupNode = getApp().globalData.groupNode;
var showType = getApp().globalData.showType;
var userId = getApp().globalData.userId;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tableData: [],
    countNum: '--', //事件计数
    tbodyHeight: 500 //tbody滚动高度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getStorage({
      key: 'dataDate',
      success: function (res) {
        console.log(res.data);
        that.createTable(res.data);
      }
    });
    wx.getSystemInfo({
      success: function (res) {

        //var height = res.windowHeight * 750 / res.windowWidth - 80;
        var height = res.windowHeight - 80 / 750 * res.windowWidth;
        //console.log(height);

        that.setData({
          tbodyHeight: height.toFixed(0)
        })
      }
    })
  },

  createTable: function (dataDate) {

    var that = this;

    var dataArray = [

      ['DEPT_NAME', 'COCKPIT_OR_RE_DEPT', 'COCKPIT_OR_DC_DEPT',
        'COCKPIT_OR_RCSA'],
      [], //部门
      [], //事件次数
      [], //损失金额
      []  //RCSA评分结果
    ];

    var quotaMeta = new Array();
    var quotaData = new Array();

    wx.request({
      url: xedmUrl + '/quotaPlugin/getMetatDataByScheme.action', //仅为示例，并非真实的接口地址
      data: {
        schemeCode: schemeCode,
        groupNode: groupNode,
        showType: showType,
        userId: userId
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        //console.log(res.data)
        quotaMeta = res.data;
      }

    });

    wx.request({
      url: xedmUrl + '/quotaPlugin/getDataByScheme.action', //仅为示例，并非真实的接口地址
      data: {
        schemeCode: schemeCode,
        BEG_DATE: dataDate,
        END_DATE: dataDate,
        showType: showType
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data.data)
        quotaData = res.data.data;
      }

    });

    setTimeout(function () {

      if (quotaData) {
        for (var i = 0; i < quotaMeta.length; i++) {
          for (var j = 0; j < dataArray[0].length; j++) {
            if (quotaMeta[i].qCode == dataArray[0][j]) {
              for (var k = 0; k < quotaData.length; k++) {
                dataArray[j + 1][k] = quotaData[k][quotaMeta[i].dataIndex];
              }
            }

          }
        }
      }
      var data = new Array();

      var countNum = 0;
      for (var i = 0; i < dataArray[1].length; i++) {
        data[i] = { bUnit: '', rEventNum: '', dAmount: '', rcsa: '' };
        data[i].bUnit = dataArray[1][i];
        data[i].rEventNum = dataArray[2][i];
        data[i].dAmount = dataArray[3][i];
        data[i].rcsa = dataArray[4][i];
        countNum += data[i].rEventNum;
      }
      console.log(data);

      if (dataArray[1].length == 0) {
        countNum = '--';
      }
      
      if(data.length == 0) {
        data = [{ bUnit: '无数据', rEventNum: '', dAmount: '', rcsa: '' }]
      }

      that.setData({
        tableData: data,
        countNum: countNum
      })
      

    }, 1000)

  }
})