說明

我們需要實現(xiàn)的是蔗蹋，頁面pgae下有兩個自定義的組件

image.png

需要實現(xiàn)的效果是：
底部菜單列表內容組件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根據(jù)分類來循環(huán)-->
  <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 設置具體的高度纠亚！

所以拋出來的問題就是如果使用這種方式話：涉及到了如何動態(tài)獲取到對應的ITEM的高度問題：

嘗試過在自定義組件內獲取ITEM節(jié)點的高度：

  ready: function() {
    // this.data.sortId === this.data.currentTabId && this.getClassList(this.data.page, 20, this.data.sortId);
    //組件生命周期函數(shù)塘慕，在組件實例進入頁面節(jié)點樹時執(zhí)行
    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
        })
      },
    })
  },

可惜獲取到的節(jié)點是null:有點不解！菜枷！

image.png

沒有設置組件2scroll-view固定高度的情況下：
導致最終的效果是：

GIF.gif

問題解決：

動態(tài)無法獲取高度：那是不是可以換一個思路苍糠！
固定頂部的組件1，讓它進行浮動（絕對定位的方式）
保持其他組件照舊啤誊！

主要變動：

image.png

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

其他保持不變岳瞭！所以可以暫時不考慮ITEM的高度的問題拥娄！

GIF2.gif