Mint UIのloadmoreコンポーネントのピット:内部要素の頭部が一部遮られている(scroll了)

フロントエンドではデータのページングロードのニーズによく遭遇します.mint-uiコンポーネントはloadmoreコンポーネントを提供します.
しかし、私が使っている間に、レイアウトとスタイルと論理を書いた後、私のmt-loadmoreラベルの頭はいつも親要素contentの上部に上がらず、paddingにも役に立たないという問題に遭遇しました.午後を改めてやっと原因を見つけた.
 
公式ドキュメントでは、データが戻ってきたら実行することを示しています.

  this.$refs.loadmore.onBottomLoaded();

私の問題は、ページリクエストに初めてアクセスした後も、この行のコードを実行し、再計算してスクロールしたことです.そのため、コンテンツの上部には一部が隠されています.
私のレイアウト、css、そして論理を共有します.

 

        
          

            

                         
            
          
      
        
    

 mounted   firstGet  ：
mounted(){
this.firstGet();
},
method：{
firstGet(){
 let url = this.baseUrl;
          axios.get(url,{
            params:{
              ...
            }
          }).then(res=>{
                //      res           
                 // this.$refs.loadmore.onBottomLoaded();             ，    scroll    ，          ，         ！！！                   。                      
                
       //          data   ，     
              this.curPageNum = res.data.info.curPageNum;
              this.maxPageNum = res.data.info.maxPageNum;
             
              if (this.curPageNum >= this.maxPageNum || this.rtnList.length==0) {
                this.allLoaded= true;
                Toast({
                  message: "        ",
                  duration: 1000
                });
              }else{
                this.allLoaded= false;
              }

            }else{
            }
          }).catch(err=>{
          })
    },
loadBottom() {//                
          var that = this;
          console.log('  loadbottom')
          if (this.curPageNum>=this.maxPageNum) {
            this.allLoaded = true;
            Toast({
              message: "        ",
              duration: 1000
            });
            this.$refs.loadmore.onBottomLoaded();
            return;
          }
          this.curPageNum++;
          let url = this.baseUrl;
          axios.get(url,{
            params:{
              ...
            }
          }).then(res=>{
         
              that.curPageNum = res.data.info.curPageNum;
              that.maxPageNum = res.data.info.maxPageNum;
         
              if (that.curPageNum>=that.maxPageNum || this.rtnList.length==0) {
                that.allLoaded= true;
                Toast("        ");
              }else{
                that.allLoaded= false;
              }
              that.$refs.loadmore.onBottomLoaded();//               mt-loadmore     
            }else{
              that.nodata  =true;
            }
          }).catch(err=>{
            that.nodata  =true;
          })
        }
}

 
実は私のfirstGetメソッドはbottomLoadedメソッドと似ています.違いは最初のリクエスト、あるいは最初のページのデータが戻ってきたときにthis.$を実行しないことです.refs.loadmore.onBottomLoaded();彼の役割は、新しいデータを取得したdivの高さを再計算し、少し上にスクロールしてデータを漏らすことです.最初のリクエストが再計算されると、データが上に移動し、ブロックされます.あの親の要素のpaddingも彼を救うことができません~