<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          vue.js學習之 如何在better-scroll加載完成后,自動滾動到最底部(示例代碼)

          2021-9-2    前端達人

          作者:_林沖

          簡介  這篇文章主要介紹了vue.js學習之 如何在better-scroll加載完成后,自動滾動到最底部(示例代碼)以及相關的經驗技巧,文章約1091字,瀏覽量459,點贊數3,值得參考!

           

          首先我們需要使用scrollTo這個方法:

          scrollTo(x, y, time, easing)

          參數:

          • {Number} x 橫軸坐標(單位 px)
          • {Number} y 縱軸坐標(單位 px)
          • {Number} time 滾動動畫執行的時長(單位 ms)
          • {Object} easing 緩動函數,一般不建議修改,如果想修改,參考源碼中的 ease.js 里的寫法

           

          為了組件的復用性,我們需要在scroll組件的props添加一個flag,可以監聽父元素是否開啟滾動到最底部。

          scrollToEndFlag: {
                  type: Boolean,
                  default: false
          }
          


          接下來我們在scroll組件的mounted中加入如下代碼:

          setTimeout(() => {
                  this._initScroll()
                  console.log(this.scroll.maxScrollY)
                  if(this.scrollToEndFlag) {
                      this.scroll.scrollTo(0,this.scroll.maxScrollY)
                  }
          }, 100)  
          


          最后在父組件中使用

          <scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>
          




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合