vant ui for VUE list 長列表組件使用

html

 <van-pull-refresh
        v-model="onRefreshLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <div class="page-list" v-if="list && list.length > 0">
            <div
              class="l-item"
              @click="checkInfo()"
              v-for="(item, i) in list"
              :key="i"
            >
              <div class="i-left">
                <div class="i-name">{{ item.typeStr }}</div>
                <div class="i-date">{{ item.created_at }}</div>
              </div>
              <div class="i-right">
                <div class="i-num">{{ item.amount }}</div>
                <div class="i-residue">餘額 {{ item.after_amount }}</div>
              </div>
            </div>
          </div>
          <no-data
            v-show="list.lenght <= 0"
            text="暫時沒有新的帳戶明細"
          ></no-data>
        </van-list>
      </van-pull-refresh>

　　js

import {
    mapActions,
    mapGetters
} from 'vuex'

import {
    minusDate
} from "@/utils/tools"
export default {
    data() {
        return {
  
            typeList: [],
            list: [],
            onRefreshLoading: false, //下拉刷新加載狀態
            loading: false, //加載狀態
            finished: false, // 是否已加載完成，加載完成后不再觸發load事件
            isLast: true, //是否最后一頁
            preSearchData: {},
            allOpen: false,
            dateOpen: false,
            search: {
                time_text: "今日",
                type_text: "全部",
                time_type: 1, // 1:今天 2:昨天 3:本月 不填，默認為1
                startDate: new Date(),
                endDate: new Date(),
                page: 1,
                size: 10,
            },
            DateConfig: [{
                    id: 1,
                    text: '今日'
                }, {
                    id: 2,
                    text: '昨日'
                },
                {
                    id: 3,
                    text: '近7日'
                }, {
                    id: 4,
                    text: '近30日'
                }, {
                    id: 5,
                    text: '自定義'
                },
            ],
        };
    },
    methods: {
        //切換時間
        checkDate(item) {
            this.search.time_type = item.id
            this.search.time_text = item.text
            this.list = []
            this.search.page = 1
            if (item.id == 5) {
                //自定義時間
            } else {
                this.search.endDate = new Date()
                switch (item.id) {
                    case 1:
                        this.search.startDate = new Date()
                        break;
                    case 2:
                        this.search.startDate = minusDate(1)
                        break;
                    case 3:
                        this.search.startDate = minusDate(7)
                        break;
                    case 4:
                        this.search.startDate = minusDate(30)
                        break;
                    default:
                        this.search.startDate = new Date()
                        break;
                }
                this.dateOpen = false
                this.getPageList({
                    id: 0
                })
            }
        },
   
        // 獲取記錄,如果請求第一頁數據必須傳id:0 
        async getPageList(options = {}) {
            this.loading = true
            const params = {
                token: this.UserInfo.token,
                id: options.id != 0 ? this.dataId : 0, // 本頁最后一條數據的ID 第一次可以為0
                page_size: 10,
                type: this.search.trading_type,
                start_date: this.dateFormat(this.search.startDate),
                end_date: this.dateFormat(this.search.endDate),
            }
            console.log('-----canshu11', params)
            let {
                data
            } = await Api._getAmountTransDetail(params)
            if (!data) return
            console.log('返回數據11', data)
            if (params.id == 0) {
                this.list = data.list
            } else {
                this.list = this.list.concat(data.list); //追加數據
            }
            console.log('返回數據222', this.list)
            this.loading = false; // 加載狀態結束 
            //數據全部加載完成
            this.finished = data.isLast; // 停止加載
            //是否最后一頁
            this.isLast = data.isLast
            this.dataId = data.dataId
        },
        //下拉刷新
        onRefresh() {
            this.onRefreshLoading = true
            setTimeout(() => {
                this.onRefreshLoading = false;
                this.getPageList({
                    id: 0
                })
            }, 1000);
        },
        onLoad(options) {
            this.getPageList(options); // 調用上面方法,請求數據
        },
        ...mapActions({
            'updateTransTypes': 'updateTransTypes'
        })
    },
    
}