h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件

最近利用vue和vantUI写h5的项目,遇到的问题总结:

问题:vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件
loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值)

这是我的页面在这里插入图片描述

  created () {
    this.getDataList('COMPREHENSIVE', 0) //记得第一次进来获取一次数据
  }

初始化loading为false,finished为false。
这是我data初始化数据,menuList是筛选的数据自己可以酌情更改

data () {
    return {
      loading: false, // 是否处于上拉加载状态
      finished: false, // 是否已加载完所有数据
      offset: 100, // 滚动条与底部距离小于offset时触发load事件
      totalPage: 1, // 总页数
      show: false,
      checkIndex: 0,
      menuList: [
        {
          val: 'COMPREHENSIVE',
          text: '综合排序'
        },
        {
          val: 'DUE_RATE',
          text: '储蓄利率从高到低'
        },
        {
          val: 'DISCOUNT_RATE',
          text: '平台返利从高到低'
        },
        {
          val: 'DAYS_OF_INTEREST',
          text: '付息期限从短到长'
        }
      ],
      wealthList: [], // 财富列表数据
      searchForm: { // 带搜索参数的总数据
        sortField: 'COMPREHENSIVE',
        pageSize: 10,
        page: 1
      }
    }
  },

加载的list,页面上有个切换的tab或者切换筛选条件,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。
changeAct方法是用来点击切换的方法

  methods: {
    changeAct (type, index) {
      this.searchForm.sortField = type //要搜索的条件
      this.checkIndex = index //当前点击的第几个用来高亮当前筛选按钮
      this.searchForm.page = 1 //筛选的时候必须初始化页数为1
      this.wealthList = [] //必须清一下列表数组
      this.loading = true// 下拉加载中
      this.finished = false// 下拉结束
      if (this.loading) {
        this.getDataList('COMPREHENSIVE', 0)
      }
    },
    //上拉加载事件
    onLoad () {
   	  if (this.wealthList.length < 10) {
        this.finished = true // 已加载完
        return
      }
      this.searchForm.page++
      this.getDataList('COMPREHENSIVE', 0)
    },
    //获取数据
    getDataList (type, index) {
      this.$https('get', '/product/list', {
        page: this.searchForm.page,
        pageSize: this.searchForm.pageSize,
        sortField: this.searchForm.sortField
      }).then((res) => {
        if (res.code === '1') {
          if (this.wealthList.length >= res.data.total) {
            this.finished = true // 已加载完
          } else {
            this.wealthList = this.wealthList.concat(res.data.items) //赋值数据
          }
          this.loading = false
          this.show = false
        } else {
          this.$toast(res.message)
          this.show = false
        }
      })
    }
  }

总结:在第一次onload的过程中将loading设置为false,则触发第二次loading,当执行到满足结束条件的时候,finished为true,结束加载。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果vue3 vant list 组件不触发上拉加载onLoad事件,可能是以下原因: 1. 没有设置List组件的高度属性。 在List组件中,必须设置height属性,否则无法触发上拉加载功能。你可以设置一个固定的高度或者一个动态计算的高度,例如: ``` <van-list :height="500" @load="onLoad"></van-list> ``` 2. 没有设置List组件的loading属性。 loading属性是用来控制上拉加载的状态的,如果没有设置loading属性,上拉加载功能将无法正常工作。你可以在setup中定义一个ref变量来控制loading属性,例如: ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 3. 没有在List组件上绑定@load事件上拉加载触发需要依赖@load事件,如果没有在List组件上绑定该事件上拉加载功能将无法正常工作。你可以在List组件上绑定一个方法,例如: ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 如果以上方法都没有解决问题,你可以尝试检查控制台输出,查看是否有相关的错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值