求助，学习前端，在项目中使用vant list 下拉无法触发onload事件，去掉immediate-check属性会死循环

Question

在vant list 下拉无法触发onload事件，去掉immediate-check属性会死循环

主页面代码

<template>
  <div class="order-list-wrap">
    <HeaderComponent title="我的订单" :showGoBack="true"></HeaderComponent>
    <van-tabs v-model="active">
      <van-tab v-for="item in tabList" :key="item.name" :title="item.title" @click-tab="activeTab">
        <van-pull-refresh
        v-model="refresh"
        success-text="刷新成功"
        @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check=false
            :offset="offset"
            @load="onLoad"
          >
          <!-- <van-cell> -->
            <ListItemComponent :orderList="orderList"></ListItemComponent>
          <!-- </van-cell> -->
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">
import HeaderComponent from '../../components/header'
import ListItemComponent from './list-item.vue'
import { nanoid } from 'nanoid'
import * as apis from './api'
export default {
  data () {
    return {
      offset: 40,
      active: 0,
      tabList: [
        {
          title: '全部',
          name: 'all'
        },
        {
          title: '待支付',
          name: 'unpaid'
        },
        {
          title: '待发货',
          name: 'unpackaged'
        },
        {
          title: '待收货',
          name: 'onTheWay'
        },
        {
          title: '已完成',
          name: 'signed'
        }
      ],
      orderList: [],
      page_info: {
        index: 1,
        count: 10
      },
      // 请求参数
      params: {
        // 0--全部 1--待支付 2--待发货 3--待收货 4--已完成
        statusCode: 0,
        currentPage: 1
      },
      // 是否刷新
      refresh: false,
      // 是否加载
      loading: false,
      // 数据是否全部请求
      finished: false
    }
  },
  components: {
    HeaderComponent,
    ListItemComponent
  },
  created () {
    // 获取查询类型
    const { statusCode } = this.$route.params
    if (statusCode) {
      this.active = statusCode
      this.params.statusCode = statusCode
    }
    // 获取数据
    this.getOrderList(this.params)
  },
  methods: {
    /**
     * @desc 请求数据
     */
    async getOrderList (params) {
      // console.log(params)
      const res = await apis.getOrderList(params)
      if (res && res.errorCode === 0) {
        const listRe = res.data.order_list.map(item => {
          return {
            ...item,
            keyId: nanoid()
          }
        })
        // 如果是首次请求 直接赋值 不需要 太复杂了
        // if (this.orderList.length === 0) {
        //   this.orderList = listRe
        // } else if (this.refresh === true) { // 如果是下拉刷新 则重新取值覆盖原来的list
        //   this.orderList = listRe
        // }
        this.orderList = this.orderList.concat(listRe)
        this.page_info = res.data.page_info
        this.refresh = false
        this.loading = false
        // this.finished = true
        if (this.orderList.length === this.page_info.count) {
          this.finished = true
        }
      }
    },
    onRefresh () {
      // 获取数据
      this.refresh = true
      // 清除原来的数据 以便存放刷新后获得的数据
      this.orderList = []
      this.page_info = {}
      this.getOrderList(this.params)
    },
    activeTab (val) {
      console.log(val)
    },
    onLoad () {
      console.log('加载更多')
      this.loading = true
      // 页码加1
      this.params.currentPage += 1
      this.getOrderList(this.params)
    }
  }
}
</script>

<style lang="less" scoped>
.order-list-wrap {
  /deep/ .van-tabs__line {
    background-color: rgba(4, 138, 4, .8);
  }
}
</style>

ListItemComponent 组件代码

<template>
  <div class="order-list-item-wrap">
    <div class="order-list-item-box" v-for="item in orderList" :key="item.keyId">
      <div class="title-time">{{item.order_sn | timeFormat}}</div>
      <van-card
        :num="item.total_product_count"
        :price="item.format_pay_price"
        desc="描述信息"
        :title="item.product_list[0].product_name"
        :thumb="item.product_list[0].main_image"
      >
        <template #tags>
          <van-tag plain type="danger">订单状态：{{item.order_status | orderStatusFormat}}</van-tag>
        </template>
        <template #footer>
          <span class="footer-text">共计{{item.total_product_count}}件，总价&yen;{{item.format_product_total_price}}</span>
          <van-button size="mini" class="del-btn" type="danger">删除</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script type="text/javascript">

export default {
  props: {
    orderList: {
      type: Array
    }
  },
  data () {
    return {
    }
  },
  components: {
  },
  methods: {
  },
  filters: {
    /**
     * @desc 时间格式化
     */
    timeFormat (val) {
      const y = val.slice(0, 4)
      const m = val.slice(4, 6).padStart(2, '0')
      const d = val.slice(6, 8).padStart(2, '0')
      const hh = val.slice(8, 10).padStart(2, '0')
      const mm = val.slice(10, 12).padStart(2, '0')
      const ss = val.slice(12, 14).padStart(2, '0')
      return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
    },
    /**
     * @desc 订单状态格式化
     */
    orderStatusFormat (val) {
      let status = ''
      switch (val) {
        case 60:
          status = '待支付'
          break
        case 70:
          status = '待发货'
          break
        case 80:
          status = '待收货'
          break
        case 90:
          status = '已完成'
          break
      }
      return status
    }
  }
}
</script>

<style lang="less" scoped>
.order-list-item-wrap {
    height: calc(100vh - 340px);
    overflow: auto;
    box-sizing: border-box;
    margin-top: 20px;
    background-color: #F4F4F4;
    padding: 0 20px;
  .order-list-item-box {
    margin-top: 32px;
    box-shadow: 0 0 12px 0 #dedede;
    }
  .title-time {
    height: 66px;
    line-height: 66px;
    background-color: #FAFAFA;
    font-size: 28px;
    text-indent: 20px;
  }
  /deep/.van-card {
    margin-top: 0;
    padding-top: 0;
  }
  /deep/ .van-card__desc {
    margin: 4px 0;
  }
  /deep/ .van-card__footer {
    display: flex;
    margin-top: 6px;
    justify-content: space-between;
    align-items: center;
    .footer-text {
      font-size: 14px;
      font-weight: 600;
    }
    .del-btn {
      border-radius: 6px;
    }
  }
}
</style>

mock接口数据 （webpack-devserver）

/**
 * @desc 获取订单列表
 * @param {*} request
 * @param {*} response
 */
const getOrderList = (request, response) => {
  const { query } = request
  console.log(query)
  // 订单列表
  const list = [] // 删除数据 减少篇幅
  let targetList = []
  // 根据参数进行筛选不同状态的订单
  if (query.statusCode === '0') {
    targetList = list
  }
  if (query.statusCode === '1') {
    targetList = list.filter(item => {
      if (item.order_status === 60) {
        return item
      }
    })
  }
  if (query.statusCode === '2') {
    targetList = list.filter(item => {
      if (item.order_status === 70) {
        return item
      }
    })
  }
  if (query.statusCode === '3') {
    targetList = list.filter(item => {
      if (item.order_status === 80) {
        return item
      }
    })
  }
  if (query.statusCode === '4') {
    targetList = list.filter(item => {
      if (item.order_status === 90) {
        return item
      }
    })
  }
  const total = targetList.length
  const page_info = {
    'page_size': 1,
    'page_num': total,
    'index': query.currentPage,
    'has_more': false,
    'count': total
  }
  // console.log(targetList)
  let qureyList = []
  // 根据currentPage 返回当前的数据
  const positison = (query.currentPage - 1) * 4
  if (query.currentPage < page_info.page_num) {
    qureyList = targetList.slice(positison, 4)
    page_info.has_more = true
  } else {
    qureyList = targetList.slice(positison, 4)
    page_info.has_more = false
  }
  const result = {
    'errorCode': 0,
    'errorMessage': 'success',
    'data': {
      'page_info': page_info,
      'order_list': qureyList
    },
    'success': true
  }

  response.json(result)
}

const OrderMockApi = app => {
  app.get('/mock/order/getOrderList', getOrderList)
}

module.exports = OrderMockApi

Answer 1

你的van-pull-refresh需要加上一个高度。

Answer 2

.van-pull-refresh { 
    height: calc(100vh - 100px) !important;
     overflow: auto !important;
} 
.van-list { height: auto !important; }

我是这么处理的