vant 上拉刷新下拉加载

vue 使用vant ui ui 实现上拉刷新下拉加载

<template>
  <div class="activity-container">
    <HeaderBar title="我的活动" :fixed="true" bgc="#fff"></HeaderBar>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
      v-if="activityList.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="offset"
        finished-text="-没有更多了-"
        @load="onLoad">
        <ul class="activity-wrapper">
          <li class="activity-list" v-for="(item,index) in activityList" :key="index" @click="gotoDetail(item.aId)">
            <div class="activity-list-top">
              <p>{{item.activityName}}</p>
              <span>{{item.activityStatusName}}</span>
            </div>
            <div class="line"></div>
            <div class="activity-describe">
              <p>
                <span class="activity-dress">活动时间：</span>
                <span>{{item.beginTime}}</span>
              </p>
              <p v-show="item.orgAddress">
                <span class="activity-dress">活动地点：</span>
                <span>{{item.orgAddress}}</span>
              </p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <div class="empty" v-else-if="complete">
      <img :src="emptyImg" alt="">
      <p>抱歉该地区暂无活动动态</p>
    </div>
  </div>
</template>
<script>
import { getActiveList } from '@api/activityList'
export default {
  name: 'MyActivityList',
  data () {
    return {
      complete: false, // 第一次数据请求完成后在来判断是否为空
      isLoading: false, // 下拉刷新
      activityList: [], // 请求数据
      pageSize: 10, // 每页条数
      currentPage: 1, // 页码
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      emptyImg: require('@/assets/images/activity/[email protected]')
    }
  },
  created () {
    this.getActiveList()
  },
  methods: {
    async getActiveList () {
      let res = await getActiveList(this.currentPage)
      let list = res.results[0].pageRecord
      this.activityList = this.activityList.concat(list)
      this.loading = false
      this.complete = true
      if (list == null || list.length === 0) {
        this.finished = true
      }
      if (list.length < this.pageSize) {
        this.finished = true
      }
    },
    // 下拉刷新
    onRefresh () {
      this.complete = false
      this.currentPage = 1
      this.isLoading = false
      this.finished = false
      this.activityList = []
      this.getActiveList() // 加载数据
    },
    // 上拉加载
    onLoad () {
      this.currentPage++
      this.getActiveList()
    },
    gotoDetail(detailId) {
      this.$router.push(`/myActivityDetail/${detailId}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.activity-container {
  padding-top: 0.44rem;
  background-color: #f5f5f5;
}
.activity-wrapper {
  background-color: #fafafa;
  .activity-list {
    padding-left: .2rem;
    margin-bottom: .1rem;
    background-color: #fff;

    .activity-list-top {
      height: .48rem;
      display: flex;
      flex-direction: row;
      padding: 0 .16rem 0 0;
      justify-content: space-between;
      align-items:center;
      & p:nth-of-type(1) {
        max-width: 2.39rem;
        color: #333;
        font-size: .14rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      & span:nth-of-type(1) {
        color: #ea5504;
        font-size: .14rem;
      }
    }
    .line {
      border-top-width: 1px;
      border-top-style: solid;
      margin: 0;
      border-top-color: #eee;
    }
    .activity-describe {
      padding: .08rem .08rem .08rem 0;
      color: grey;
      font-size: .14rem;
      .activity-dress {
        display: inline-block;
        width: .7rem;
        margin-right: .29rem;
      }
    }
  }
}
.empty {
  height: 2.91rem;
  background-color: #fff;
  padding-top: 1.5rem;
  img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin:0 auto;
  }
  & p:nth-of-type(1) {
    text-align: center;
    color: grey;
    font-size: .15rem;
  }
}
</style>