微信小程序固定表头

采用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)  }})