vant list freshheight, pull +list, vant刷新加载,下拉加载更多

      <div v-if="commentList.length" :style="{height: freshHeight + 'px'}" class="comments_content_wrap commentList__group list-content" ref="listRef">
        <van-pull-refresh
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            :offset="1"
            @load="onLoad"
          >
          <div class="comment_item" v-for="(item, index) in commentList" :key="index" style="marginBottom: 12px">
            <div class="comment" >
          
            </div>
          </div>
          </van-list>
        </van-pull-refresh>
      </div>

  js部分:

    onRefresh () {
      // 清空列表数据
      this.finished = true
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true
      this.refreshing = true
      this.listQuery = {
        current: 1,
        size: 10
      }
      this.onLoad()
    },
    onLoad () {
    const timer = setTimeout(() => {
      this.getComments()
      clearTimeout(timer)
    }, 500)
    },

    async getComments () {
      const params = {
        params: {
        }
      }
      let res = await this.axios.get(url, params)
      if (res.data.code === 0) {
        if (this.refreshing) {
          this.setListData([])
          this.refreshing = false
        }
        this.loading = false
        const { total, records } = res.data.data
        this.total = total
        this.listQuery.current++
        this.finished = records.length < this.listQuery.size
        this.setListData(records, true)
      } else {
        this.setListData([])
        this.refreshing = false
        this.$toast(res.data.msg)
      }
      setTimeout(() => {
        if (this.$refs.listRef && this.commentList.length) {
          let height = 15
          if (!this.isSelfFlag) {
            height = 90
          }
          this.freshHeight = document.documentElement.clientHeight - this.$refs.listRef.getBoundingClientRect().top - height
        }
      }, 100)
    },
    setListData (data, isMore) {
      if (isMore) {
        this.commentList= this.$lodash.concat(this.commentList, data)
      } else {
        this.commentList = data
      }
    },

 例2:

    <div class="middle_content_wrap" ref="listRef" v-if="this.currentMonthList.length !== 0" :style="{ height: freshHeight + 'px' }">
      <div
        class="list__group list-content"
        >
          <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :immediate-check="false"
              :offset="1"
              @load="onLoad"
            >
            <div class="list" >
              <div class="row_content"  v-for="(item, index) in currentMonthList" :key="index">
              item
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>

  例2js部分:

    onRefresh () {
      // 清空列表数据
      this.finished = true
      // 隐藏文本
      this.finishedTextShow = false
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true
      // 将 refreshing 设置为 true,表示处于加载状态
      this.refreshing = true
      this.listQuery = {
        current: 1,
        size: 9
      }
      this.onLoad()
    },
    // 下拉刷新,上拉加载
    onLoad () {
      const timer = setTimeout(() => {
        this.getList()
        clearTimeout(timer)
      }, 500)
    },

    async getList () { // 当月按天周年人员信息分页查询
      const params = {
        params: {
        }
      }
      let res = await this.axios.get(url, params)
        // this.currentMonthList = data.records
      if (res.data.code === 0) {
        if (this.refreshing) {
          this.setListData([])
          this.refreshing = false
        }
        this.loading = false
        const { total, records } = res.data.data
        this.total = total
        this.listQuery.current++
        this.finished = records.length < this.listQuery.size
        this.setListData(records, true)
      } else {
        this.setListData([])
        this.refreshing = false
        this.$toast(res.data.msg)
      }
    },
    setListData (data, isMore) {
      if (isMore) {
        this.currentMonthList= this.$lodash.concat(this.currentMonthList, data)
      } else {
        this.currentMonthList = data
      }
    },

  watch: {
    currentMonthList: {
      handler(val) {
        if (val && val.length) {
          this.showPage = true
          setTimeout(() => {
            if (this.$refs.listRef && this.currentMonthList.length) {
              let height = 75
              this.freshHeight = document.documentElement.clientHeight - this.$refs.listRef.getBoundingClientRect().top - height
            }
          }, 100)
        }
      }
    }
  },

  

 

posted @ 2025-06-17 14:26  everseven  阅读(29)  评论(0)    收藏  举报