Vant 2.0 下拉刷新,上拉加载

Vant 2.0 下拉刷新,上拉加载

核心代码如下:

<!--  -->
<template>
  <div class="container">
    <van-nav-bar title="测试标题"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 class="title"
                 fixed
                 :placeholder="isFixedHeight"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" >
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
    >
      <van-row v-for="(item,index) in dataList" :key="index"
               style="margin-top: 10px;margin-left: 10px; margin-right: 10px"
               gutter="10"
      >

        <van-col span="8">
          <van-image
              width="100px"
              height="80px"
              :src="getCoverImage(item.newsBanner)"
          />
        </van-col>

        <van-col span="16">

          <div class="news-right">
            <span class="van-multi-ellipsis--l3">{{ item.newsTitle }}</span>


            <span class="van-ellipsis">{{ item.createTime }}</span>
          </div>

        </van-col>
      </van-row>

    </van-list>

    </van-pull-refresh>


  </div>
</template>

<script>

import {
  listNews
} from "@/api/business/news/news.js";

export default {
  name: 'Test',
  data() {

    return {
      isFixedHeight: true,

      refreshing: false,
      loading: false,
      finished: false,
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        newsTitle: undefined,
        newsType: undefined,
        status: undefined
      },
    };
  },


  methods: {
    getCoverImage(res) {
      return process.env.VUE_APP_BASE_API + res
    },
    onClickLeft() {
      //返回上一页
      this.$router.go(-1)
    },
    getList() {

      listNews(this.queryParams).then(response => {
        if (this.refreshing) {
          this.dataList = [];
          this.refreshing = false;
        }
        // 加载状态结束
        this.loading = false;
        this.dataList = this.dataList.concat(response.rows);//追加数据
        this.finished = !response.hasNext;
        this.queryParams.pageNum += 1;//页数+1
      });
    },
    onRefresh() {
      this.queryParams.pageNum = 1
      // 清空列表数据
      this.dataList=[]
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true;
      this.getList();
    },
  },

  created() {
    // this.getList();
  }

}
</script>
<style scoped>
.container{
  width: 100%;
  height: 100%;
}
.news-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值