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

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

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

这是我的页面h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件_第1张图片

  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,结束加载。

你可能感兴趣的:(vue,vue,前端,tab)