微信小程序展示列表之表头固定顶部

微信小程序表头固定顶部

下面的例子适合 于 表头直接在顶部的需求 没有查询条件之类的组件在上面
wxml中的代码 的关键代码是 style="position:fixed; top:0;" 和 style='margin-top:{{marginTop}}rpx;"

<view class='table'>
  <view class="tableHeader" style="position:fixed; top:0;z-index:1;width:{{tableWidth}}rpx;">
    <view class="firHeader">
      <text>日期</text>
    </view>
    <view class="header">
      <text class='firHeaderRow'>场次</text>
    </view>
    <view class="header">
      <text class='firHeaderRow'>人次</text>
    </view>
    <view class="header pf">
      <text class='firHeaderRow'>票房</text>
    </view>
    <view class="header">
      <text class='firHeaderRow'>平均票价</text>
    </view>
  </view>
  <view style='margin-top:{{marginTop}}rpx;width:{{tableWidth}}rpx'>
    <block  wx:for='{{dataArr}}' wx:key='{{index}}'>
      <view class="tableRows" >
        <view class='firHeader'>
          <text>{{item.name}} </text>
        </view>
        <view class="header">
          <text class='firHeaderRow'>{{item.changci}}</text>
        </view>
        <view class="header">
          <text class='firHeaderRow'>{{item.renci}} </text>
        </view>
        <view class="header pf">
          <text class='firHeaderRow'>{{item.pf}}</text>
        </view>
        <view class="header"> 
          <text class='firHeaderRow'>{{item.avgprice}}</text>
        </view>
      </view>
    </block>
  </view>
</view>

js中代码块 关键是 找到表头组件的高度(组件的高度/组件的高度的rpx=组件的宽度/组件的宽度的rpx) 通过计算得出行数据的组件的高度的rpx值 就是行数据view与表头view的外边距离

data: {   
    tableWidth: 745,
    marginTop: 0,
    dataArr:[]
  },
onLoad: function (options) {    
	/**关键是 找到表头组件的高度(组件的高度/组件的高度的rpx=组件的宽度/组件的宽度的rpx)    通过计算得出行数据的组件的高度的rpx值 就是行数据view与表头view的外边距离 */
    wx.createSelectorQuery()
      .selectAll('.tableHeader')
      .boundingClientRect((rects) => {
        let rect = rects[0];        
        this.setData({
          marginTop: this.data.tableWidth * rect.height / rect.width
        });
      }).exec();
  },