小程序简单的关于scroll-view与page不一起滚动

说明

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

image.png

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

page页面布局文件：

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布局文件

  
    
      
        
          
            我是列表的内容界面{{currentTabId}}+{{index}}
          
        
      
    
  
  
    
  

最终效果的话页面会随着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