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

最新推荐文章于 2024-08-12 17:54:40 发布

xueyuanjiayou

最新推荐文章于 2024-08-12 17:54:40 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发

本文链接：https://blog.youkuaiyun.com/xueyuanjiayou/article/details/83003784

微信小程序开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在微信小程序中实现上拉时表头固定的效果，特别适用于列表头部包含搜索bar或datePicker等控件的情况。通过调整scroll-view的高度和使用onLoad函数获取窗口与表头的高度差，确保在滚动时表头始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##微信小程序上拉表头固定
下面的例子适合列表头上有搜索bar或者datePicker之类的控件
wxml中代码如下

<view class="dateSelection">  
  <text class='dateText'>月份: </text>
  <view class='datePicker'>
    <picker mode="date" value="{{sm}}" 
       start="2001-09" end="2035-10" fields='month' bindchange="handleSMonthChange">
      <view class="picker"> {{sm}}</view>
    </picker>
  </view>
  <text class="middle">至</text>
  <view class='datePicker'>
    <picker mode="date" value="{{em}}" 
      start="2001-09" end="2035-10"  fields='month' bindchange="handleEMonthChange">
      <view class="picker"> {{em}}</view>
    </picker>
  </view>
</view>

<view class='table'>
  <view class="tableHeader">
    <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">
      <text class='firHeaderRow'>票房(万)</text>
    </view>
    <view class="header">
      <text class='firHeaderRow'>平均票价</text>
    </view>
  </view>
  <scroll-view scroll-x="true" scroll-y="true" style='height:{{tbodyHeight}}px' bindscrolltolower='scrollHandler' class='tbody_scroll'>
  <block  wx:for='{{dataArr}}' wx:key='{{index}}'>
    <view class="tableRows"style='{{index%2==0?"":"background-color:#F7F7F7;"}}' >
      <view class='firHeader'>
        <text>{{index==0?'':index+'、'}}{{item.dname}} </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">
        <text class='firHeaderRow'>{{item.pf}}</text>
      </view>
      <view class="header"> 
        <text class='firHeaderRow'>{{item.avgprice}}</text>
      </view>
    </view>
  </block>
  </scroll-view>
</view>

js 的代码块关键代码

Page({
  /**
   * 页面的初始数据
   */
  data: {  
    dataArr: [],
    tbodyHeight: 500
  },
onLoad: function (options) {    
	/**关键是 找到当前窗口的高度 和表头的高度 窗口高度-表头高度 就是scroll_view 的滚动高度 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。 */
    wx.getSystemInfo({
            success: (res) => {
              let rs = res;//
              wx.createSelectorQuery()
                .selectAll('.tableHeader')
                .boundingClientRect((rects) => {
                  let rect = rects[0];
                  let height = rs.windowHeight - rect.height;//窗口高度-表头高度 
                  this.setData({
                    tbodyHeight: height.toFixed(0),
                  })
                }).exec();
            }
          });
  },
scrollHandler: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    this.search();
  }