• vant-list上滑加载,数据重复,加载后返回顶部


    (1)vant-list上滑加载

    list这个组件,必须具有高度,才能实现上滑加载,不然不会有上滑加载的过程。 

    因为没有高度,相当于整个屏幕都是组件的,就没有底部一说,所以会一直加载所有的,

    类似下面的列表,是有高度的。

    方法:

    • 可以用flex布局

    .view {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    width: 100%;

    height: 100%;

    }

    .header {

    }

    .content {

    overflow-y: scroll;

    }

    list用vant的list就可以。

                class="drop-list"

                v-model="loading"

                :finished="finished"

                finished-text="没有更多了"

                :offset="10"

                @load="onLoad"

            >

                

            

    (2)搜索后数据重复

    onsearch中直接执行onLoad,不要直接调用接口,不然接口和onLoad都会执行一遍

    onSearch(value){

                this.init()

                // this.getArtivleList(this.isAll, this.typeValue)

                this.onLoad()

            },

    (3)加载后,list回到顶部

    因为请求后台接口时,统一加了toast  Loading的提示,且设置了 forbidClick: true,

    解决办法,请求后台接口时,加一个setTimeout

    onLoad() {

                this.loading = true

                if(!this.finished){

                    setTimeout(() => {

                        this.getZJDoctortList()

                    }, 200);

                }

            },

    (4)上滑没有加载动作

    如果没有加载动作,需要检查finished的值,如果finished为true,就不会再触发上啦加载的动作了,finished只有在返回的数据量》=total时,才会为true

  • 相关阅读:
    js函数调用的方式有几种
    HW-初始准备
    (六)Vue之MVVC
    进程组.会话.终端
    Spring Cloud 学习笔记(1 / 3)
    万兆以太网MAC设计(9)数据流仲裁模块
    ERP与MES系统概述
    【muduo源码剖析】Buffer类的设计
    操作系统·处理机调度死锁
    go pprof 如何使用 --chatGPT
  • 原文地址:https://blog.csdn.net/qq_42440919/article/details/127408994