vue3 使用vant4中的List分頁載入時，會回滾到頁面頂部

ZerlinM發表於2024-04-25
Vue

問題

專案中使用vue3+vant4，列表頁使用了 List 來做列表載入，程式碼如下：

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="沒有更多了"
  @load="onLoad"
>
  <div v-if="list && list.length" class="listCon">
    <div class="item" v-for="(item, index) in list" :key="item">
      {{ item.name }}
    </div>
  </div>
  <div v-else>
    暫無資料
  </div>
</van-list>

以上元件使用到的方法不再羅列，只闡述使用了List元件，產生的問題是：
介面使用分頁，上拉載入第二頁及後續頁面時，h5頁面會回滾到頂部

解決

查程式碼發現，在封裝的request元件中，傳送請求時展示Toast，請求結束去除Toast，就是這個Toast導致的頁面回滾到頂部。

解決方法 暫時時傳送請求時判斷path是否為列表，是的話不展示Toast。
如果大家有好的方法可以留言奧~~

相關文章