vant-list的使用

vant-list的使用

<template>   
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="innerConScroll">
      <div
        class="container"
        v-for="(item, index) in tableData"
        :key="'li' + index"
      >
        <div class="contentTime">{{ item.busiDate }}</div>
        <div class="contentValue">{{ item.tdyPayf }}</div>
      </div>
    </div>
  </van-list>
</template>


<script>
  import { List } from 'vant'
  export default {
    components: {
      vanList: List
    },
    data () {
      return {
        loading: true, // 设置为true时，页面一进来时不会触发load事件 (防止页面一进来就触发load事件)
        finished: false
      }
    },
    methods: {
      onLoad: function () {
        const that = this
        that.loading = true
        that.page++
        that.searchListFn()
      },

      searchListFn: function () {
        const that = this
        const url = window.env.commomApiUrl + '/open/xjcf/api/finance/financeProdDividend/queryUnpdPayf'
        const defaultParam = bossConstructClass.commonParamFn(that.baseInfos)
        const requestParam = {
          ...defaultParam,
          data: {
            endDate: that.endTime,
            limit: 10,
            page: that.page
          }
        }
        bossConstructClass.postJson(url, requestParam).then((response) => {
          that.loading = false
          if (response.code === '0') {
            const count = Number(response.count)
            if (that.page === 1 && count > 0) {
              that.rectCashDate = response.extendData.rectCashDate
            }
            const result = response.data || []
            if (result.length === 0) {
              that.finished = true
            }
            that.tableData = that.tableData.concat(result)
            if (count === 0) {
              // 表示数据加载完了
              that.noContent = true
            } else {
              that.noContent = false
            }
          } else {
            Toast({
              message: response.codeInfo
            })
          }
        })
      }
    }
  }
</script>