vant list 下拉刷新和滚动刷新

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :offset="50" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item, index) in pointsList" :key="index" class="tab_cell">

export default {
  data() {
    return {
      tab_active: 0,
      loading: false,
      finished: false,
      refreshing: false,
      pointsList: [],
      page: 0,
      pagesize: 15
    }
  },
  computed: { ...mapGetters(['userInfo', 'userId']) },
  methods: {
    tab_change(val) {
      console.log(val)
      this.tab_active = val
      window.scrollTo(0,0);
      this.onRefresh()
      // this.getCommentListArr()
    },
    onLoad() {
      this.page++
      if (this.refreshing) {
        this.pointsList = []
        this.refreshing = false
      }
      setTimeout(() => {
        this.getCommentListArr()
      }, 500)
    },
    onRefresh() {
      // 清空列表数据
      this.page = 0
      this.pointsList = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    async getCommentListArr() {
      let params = {
        uid: this.userId,
        page: this.page,
        pagesize: this.pagesize,
        state: this.tab_active + 1
      }
      console.log(params);
      await getCommentList(params)
        .then(res => {
          console.log(res)
          if (res.code == 1) {
            this.loading = false
            console.log(res)
            this.pointsList = [...this.pointsList, ...res.list]
            console.log(res.total)
            if (this.pointsList.length >= parseInt(res.total)) {
              this.finished = true
            }
          }
        })
        .catch(res => {
          this.$toast(res.msg)
          this.finished = true
        })
    },
    
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值