vue 移动端vant下拉加载和上拉刷新

最新推荐文章于 2024-06-28 07:30:00 发布

weixin_44134816

最新推荐文章于 2024-06-28 07:30:00 发布

阅读量339

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44134816/article/details/126226702

版权

前端专栏收录该内容

80 篇文章 2 订阅

订阅专栏

    <van-pull-refresh v-model="refreshing" class="refresh" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="50"
        @load="onLoad"
      >
        <van-search
          v-model="searchText"
          placeholder="请输入搜索关键词"
          shape="round"
          @blur="onSearch"
        />
        <ul class="mailList">
          <li
            v-for="(item, index) in tabList"
            :key="index"
            @click="onClick(index, item)"
          >
            <span :class="{ click: index == select }">{{ item.name }}</span>
            <span v-if="item.tcount != 0" class="badge">{{ item.tcount }}</span>
          </li>
        </ul>
        <!-- 列表内容 -->

        <van-cell
          v-for="item in dataList"
          :key="item.index"
          @click="goIframe(item)"
        >
          <div v-if="select == 0" class="system">
            <div class="system_top">
              <div class="title">
                <span class="l_name"> {{ item.senderName }}</span><img
                  v-if="item.hasAtt != 0"
                  src="../../../assets/fujian.png"
                  width="12"
                  alt=""
                >
                <span class="time">{{ item.senderTime.slice(0, 19) }}</span>
              </div>
              <div class="smalltitle">
                <span class="s_small">{{ item.title }}</span>
              </div>
              <div class="r_content">
                <span>{{ item.content }}</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>

data(){
 return{
  loading: false,
  finished: false,
  refreshing: false
 }
}
 // 列表数据
    getData() {
      this.loading = true
      const data1 = {}
      request.post(`oaApi`, data1).then(res => {
          this.dataList = this.dataList.concat(res.data.rows)
          this.total = res.data.total
          if (this.dataList.length <= this.total) {
            if (res.data.total === 0) {
              this.finished = true
            } 
            else {
              this.finished = false
            }
          }
          // this.finished=true
          this.loading = false // 加载状态结束
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 上拉刷新
    onLoad() {
      this.currentpage++
      this.loading = true
      const num = this.total / this.pageSize
      if (Number.isInteger(num)) {
        this.number = num
      } else {
        this.number = parseInt(num) + 1
      }
      if (this.dataList.length < this.total) {
        if (this.currentpage <= this.number) {
          this.getData()
          this.loading = false
        }
      } else {
        this.loading = false
        this.finished = true
      }
    },
    // 下拉刷新
    onRefresh() {
      this.dataList = []
      this.currentpage = 1
      this.getData()
      if (this.refreshing) {
        this.content = this.dataList
        this.dataList = this.content
        this.refreshing = false
      }
      this.loading = false
    },