<van-list
     v-model="loading"
     :finished="finished"
     finished-text="沒有更多了"
     @load="onLoad"
  >
       正常的遍歷searchResult內(nèi)數(shù)據(jù) 渲染至頁面內(nèi)容
 </van-list>      

data() {
    return {
      searchResult: [],  //搜索到的總的數(shù)據(jù)，用此數(shù)組內(nèi)數(shù)據(jù)來遍歷展示
      loading: false,  //加載中 (狀態(tài)) - 只有為false, 才能觸底后自動觸發(fā)onload方法
      finished: false,   // 未加載全部 (如果設置為true, 底部就不會再次執(zhí)行onload, 代表全部加載完成)
      page: 1,  // 當前搜索結(jié)果的頁碼
    };
  },  

<script>
export default {
  methods: {
    // 此為js代碼，監(jiān)聽事件，發(fā)送異步操作的數(shù)據(jù)請求
    async btn2() {
      this.loading = false // 優(yōu)化bug，防止出現(xiàn)首次多加載一次的情況
      this.finished = false // 加載未結(jié)束
      this.page = 1 // 走完函數(shù)，就將當前頁恢復至1，防止后面累加，導致點擊別的篩選條件時無效
      // 異步發(fā)送請求獲取數(shù)據(jù)賦值給data內(nèi)變量
      const { data } = await getSearchResult({
        keywords: this.value, // 此為接口需要的參數(shù)
        limit: 20
      })
      this.searchResult = data.result.songs
    },
    async onLoad() { // 觸底事件(要加載下一頁的數(shù)據(jù)), 內(nèi)部會自動把loading改為true，為true后才會執(zhí)行x
      this.page++ // 加載至底部就將頁面值+1
      const { data } = await getSearchResult({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20 // 傳參固定公式，頁面偏移量即一頁多少數(shù)據(jù)
      })
      if (data.result.songs === undefined) { // 下拉刷新后此次檢索不到數(shù)據(jù)了，表示已經(jīng)將所有數(shù)據(jù)加載完了
        return (this.finished = true) // finished賦值為true，表示 不再去進行加載了，結(jié)束狀態(tài)
      }
      this.searchResult.push(...data.result.songs) // 將每次下拉刷新檢索到的數(shù)據(jù)加入 展示的數(shù)據(jù)列表
      this.loading = false // 切記，本次加載完更多數(shù)據(jù)后,一定要把loading改成false, 保證下一次還能觸發(fā)onload方法
    }
  }
}
</script>