说明

我们需要实现的是，页面pgae下有两个自定义的组件

image.png

需要实现的效果是：
底部菜单列表内容组件ITEM滑动加载更多的时候，顶部的组件1不会随着页面进行滑动，即固定顶部的位置。

page页面布局文件：

<import src="../../components/index-classify/index-classify.wxml"></import>
<view class="index">
  <template is="index-classify" data="{{classSortList:classSortList,currentTabId:currentTabId,scrollToId:scrollToId,isHiddenMenuShow:isHiddenMenuShow}}"></template>

  <!-- classSortList根据分类来循环-->
  <couser-list-content currentTabId="{{currentTabId}}" sortId="{{item.id}}" wx:if="{{item.activated}}" wx:for="{{classSortList}}" wx:key="{{ item.id }}">
  </couser-list-content>

</view>

PS：注意是对应的class="index":

/* 导入分类样式库 */
@import "../../components/index-classify/index-classify.wxss";
@import "../../basewxss/ionfoont2.wxss";


.index {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
}

组件2布局文件

<!--components/couser-list-content/couser-list-content.wxml-->
<view class="index-content" style="display: {{sortId===currentTabId?'block':'none'}}">
  <scroll-view scrollY bindscroll="onScroll" bindscrolltolower="onScrollToLower" class="scroll-container" scrollTop="{{scrollTop}}">
    <view class="class-list-22222">
      <view class="class-list">
        <view wx:for="{{courseList}}" wx:key="{{index}}">
          <view>
            我是列表的内容界面{{currentTabId}}+{{index}}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <view bindtap="backTop" class="backtop">
    <text class="backtop-icon iconfont icon-top"></text>
  </view>
</view>

最终效果的话页面会随着pgae滚动而滚动，主要问题是：我这边没有给对应的scroll-view 设置具体的高度！

所以抛出来的问题就是如果使用这种方式话：涉及到了如何动态获取到对应的ITEM的高度问题：

尝试过在自定义组件内获取ITEM节点的高度：

  ready: function() {
    // this.data.sortId === this.data.currentTabId && this.getClassList(this.data.page, 20, this.data.sortId);
    //组件生命周期函数，在组件实例进入页面节点树时执行
    var a = this.data.page;
    console.log("撒谎啥回事", a)
    let that = this;
    //search-view高度
    let qSearch = wx.createSelectorQuery().select('class-list-22222').boundingClientRect();
    // qSearch.select('.class-list').boundingClientRect()
    qSearch.exec(function (res) {
      console.log('res:', res)
      // that.setData({
        useHeith: that.data.useHeith + res[0].height
      // })
    })

    wx.getSystemInfo({
      success: function (res) {
        console.log("啊胡小胡", res)
        that.setData({
          canUseWidth: res.windowWidth,
          canUseHeith: res.windowHeight,
          scrollViewHeith: res.windowHeight - 160
        })
      },
    })
  },

可惜获取到的节点是null:有点不解！！

image.png

没有设置组件2scroll-view固定高度的情况下：
导致最终的效果是：

GIF.gif

问题解决：

动态无法获取高度：那是不是可以换一个思路！
固定顶部的组件1，让它进行浮动（绝对定位的方式）
保持其他组件照旧！

主要变动：

image.png

.index {
    position: absolute;
    overflow-x: hidden;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
}

其他保持不变！所以可以暂时不考虑ITEM的高度的问题！

GIF2.gif