微信小程式表頭固定螢幕頂部

下面的例子適合 於 表頭直接在頂部的需求 沒有查詢條件之類的元件在上面 wxml中的程式碼 的關鍵程式碼是 style="position:fixed; top:0;" 和 style='margin-top:{{marginTop}}rpx;"

<view class='table'>
  <view class="tableHeader" style="position:fixed; top:0;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();
  },