精华内容
下载资源
问答
  • vant下拉刷新(分页)
    2021-12-30 15:48:10
    <van-list
        class="list_box"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-cell class="list_box_item" v-for="(item,index) in list" :key="index">
        <div>...</div>
      </van-cell>
    </van-list>
    
    list: [],
    loading: false,
    finished: false,
    search: {
        page: 0, //页数
        limit: 6, //条数
        totalCount:100
    },
    onLoad() {
      // 异步更新数据
      this.getData();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 列表
    getData() {
      this.loading = true;
      this.search.page += 1;
      this.$http
          .get("接口", {
            params: {
              ...this.search,
            },
          })
          .then((res) => {
            this.search.total = res.data.totalPage; // 多少页数
            this.search.totalCount = res.data.totalCount; // 数据总数
            this.search.page = res.data.currPage; // 当前页数
            this.list.push(...res.data.list);
            // 加载状态结束
            this.loading = false;
            if (this.list.length >= this.search.totalCount) {
              this.finished = true;
            }
          });
    },
    更多相关内容
  • //下拉刷新onRefresh() {this.list = [];this.curPage = 1;this.finished = true;this.getData();},getData() {this.isLoading = false;getList({curPage: this.curPage,pageSize: this.pageSize}).then((res) =>...

    //下拉刷新

    onRefresh() {

    this.list = [];

    this.curPage = 1;

    this.finished = true;

    this.getData();

    },

    getData() {

    this.isLoading = false;

    getList({

    curPage: this.curPage,

    pageSize: this.pageSize

    }).then((res) => {

    this.listLoading = false;

    if (res.code == 200) {

    this.list = this.list.concat(res.data.list);

    this.curPage = res.data.nextPage;

    if (this.list.length >= res.data.total) {

    this.finished = true;

    }else {

    this.finished = false;

    }

    }

    })

    },

    原因是在于下拉刷新的时候触发了上拉加载,所以执行了两次

    解决方法是:先将list组价的finished=true,数据加载完了在判断该值应该是true还是false,这样可以避免在下拉刷新的时候触发上拉加载。

    展开全文
  • <template> <div> <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" /> <van-pull-refresh v-model="refreshing" @refresh="onRefresh">...
    <template>
      <div>
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            :offset="offset"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.id" :title="item.msgContent" style="height:90px" />
          </van-list>
        </van-pull-refresh>
      </div>
    </template>
    <script>
    import { selectMsgByCondition } from "@/api/login";
    export default {
      data() {
        return {
          list: [],
          loading: false,
          finished: false,
          refreshing: false,
          page: 1,
          rows: 10,
          msgStatus: "",
          offset: 100
        };
      },
      methods: {
        onClickLeft() {
          this.$router.go(-1);
        },
        //上拉执行事件
        onLoad() {
          this.selectMsgByCondition();
        },
        /**
         * List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。
         * 此时可以发起异步操作并更新数据,数据更新完毕后, 将loading设置成false即可。
         * 若数据已全部加载完毕,则直接将finished设置成true即可。
         */
        selectMsgByCondition() {
          let obj = { page: this.page, rows: this.rows, msgStatus: this.msgStatus };
          selectMsgByCondition(obj).then(res => {
            //如果是第一次进入页面page==1 直接复制
            if (this.page == 1) {
              this.list = res.data.records;
            } else {
              //如果不是则在后面追加数据
              res.data.records.forEach(item => {
                this.list.push(item);
              });
              //追加完成后关闭loading
              this.loading = false;
            }
            //当还有数据是page++
            if (this.page < res.data.pages) {
              this.page++;
              this.loading = false;
            } else {
              //如果没有数据加载完毕
              this.finished = true;
            }
          });
        },
        //下拉刷新
        onRefresh() {
          // 清空列表数据
          this.page = 1;
          this.selectMsgByCondition();
          this.refreshing = false;
        }
      }
    };
    </script>
    
    展开全文
  • vant下拉刷新发送两次请求的问题

    千次阅读 2019-05-17 13:44:36
    **问题:**在vant的上拉加载和下拉刷新同时使用的过程中,可能会出现下拉刷新发送了两次请求的问题 **原因:**是在下拉刷新过程中,可能会触发上拉加载,导致发送两次请求。 **解决方法:**所以在下拉刷新过程中,...

    问题

    在vant的上拉加载和下拉刷新同时使用的过程中,可能会出现下拉刷新发送了两次请求的问题

    原因

    下拉刷新过程中,可能会触发上拉加载,导致发送两次请求。

    解决方法

    所以在下拉刷新过程中,可以将上拉加载的finished设置为true,这样在上拉刷新过程中就不会进行上拉加载,在下拉刷新完成之后再将上拉加载的finished设置为false
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 一个类似朋友圈的页面 需要下拉刷新 上拉加载,而且要在页面滚动时候隐藏所有弹出框如评论的输入框,点赞分享的操作按钮弹出框等;出现要么一上拉就触发刷新 要么就是下拉和触底正常 但无法监听滚动;总算弄好了最后...
  • 下拉刷新
  • <template> <div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50" >...van-cell.
  • vant组件下拉刷新 + 上拉加载

    千次阅读 2021-01-11 20:35:49
    -- 实现下拉刷新 --> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" // 初始值是false, 当组件滚动到底部时,会触发 load 事件并将 loading 设置成 ...
  • [Vue] Vant 实现下拉刷新功能

    千次阅读 2020-04-28 11:28:40
    // 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作, // 操作完成后将 v-model 设置为 false,表示加载完成。 }, methods: { onRefresh() { // 下拉刷新 this.finished = false; // 不...
  • 下拉刷新和上拉加载 一、安装vant 二、按需引入组件 三、操作main.js 四、实现下拉刷新和上拉加载功能的index.vue页面 一、安装vant npm i vant -S 二、按需引入组件 按需引入组件,操作babel.config.js文件写入 ...
  • List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果。 <div class='list'> <van-empty v-if="list.length === 0" description="暂无明细" /> <van-pull-refresh v-model="refreshing...
  • vant滚动条下滑与下拉刷新冲突问题

    千次阅读 2021-07-24 19:26:05
    在往下拨动数据进行查看起始数据的时候,往往与vant下拉刷新的组件冲突,本来是想往下滑动滚动条查看数据,结果老是触发下拉刷新。 解决方案: 在数据内容的div中添加**@touchmove.stop**属性 <van-pull-...
  • <template> <div class="nc-discover"> <van-nav-bar title="发现" fixed /> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished" ... .
  • 如果对你有帮助 顺便点个赞呗~~ css 也是很关键的一步 /* 全局的下拉 */ .van-pull-refresh{ min-height: 100%; //自己自定义或不配置 } /* 全局上拉视口定义 */ .scroll_wrap{ height: 100vh; //自定义如果不足100...
  • 十分钟教你用vant实现下拉刷新上拉加载

    万次阅读 多人点赞 2019-06-27 21:46:59
    十分钟教你用vant实现下拉刷新上拉加载 vant是有赞团队推出的基于vue一套移动端小程序UI框架,不写小程序我也用了下,还是很不错的,刚好今天要做一个移动端上拉刷新下拉加载功能,去网上看的例子当中,没有一个是...
  • <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :offset="50" :finished="finished" finished-text="没有更多了" @load="onLoad"> <...
  • 导致这个的原因就是因为弹出框挂载到了下拉刷新的div上,所以才会触发下拉刷新,弹出框最好挂载到body上,在vant的官网中弹出框(Dialog)有一个这样的属性 默认就是在body挂载,但不知道为何没有生效 ,只要在弹出...
  • 首先先把van-list控件放入列表项中 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <list-nav :list="list">.../list-nav&g.
  • 1.HTML代码 使用vant中的List和PullRefresh组件即可 <template> <div class="profly-layout"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="is...
  • 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-...
  • 可以使用vant组件库实现-上拉刷新下拉加载功能 vant2开发指南:htt[ps://youzan.github.io/vant/v2/#/zh-CN/list 上拉加载- - -List列表 <van-list v-model="loading" :finished="finished" finished-text=...
  • vant分页、下拉刷新

    2021-07-05 15:50:29
    success-text="刷新成功" @refresh="onRefresh" > <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad" > <div class="cell" v-for="(item...
  • 2.JS 为什么会连续触发 load 事件? 如果一次请求加载的数据条数较少,导致列表内容无法铺满当前屏幕,List 会继续触发 load 事件,直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数,...
  • 使用vant实现下拉刷新上拉加载

    千次阅读 2019-07-10 17:47:24
    整理了一下vue的下拉刷新上拉加载,我这里使用的是vant, 亲测可用,有需要的可以了解一下! template部分: <!-- 刷新加载 --> <template> <div class=''> <div class="list-content" id=...
  • 一,二次封装的组件代码 <template> <... success-text="已为您刷新成功" > <van-list v-model:loading="myLoading" :finished="finished" finished-text="没有更多了" @load="o
  • 分享一个vant-ui中下拉刷新的BUG

    千次阅读 2019-05-23 14:54:36
    场景:在我自己手机上(iphone 6s 10.3.1)实现的下拉刷新无效,其他手机(包含6s)和电脑均可以,(脚手架使用的vuecli3.0 脚手架中vue的版本为:vue@2.6.10) 处理结果:将vue@2.6.10改为@2.5.22解决 官方issues:...
  • 官方文档 上拉加载,上拉刷新在加载自己的请求服务list数据时里面有个填坑,在此不赘述,如果想体验的自己去copy官方。以下直接上源码。参考了几篇类似文章,内容如有错误、bug... // 下拉刷新 设置为 false,表示加载
  • VUE+Vant实现下拉刷新和上拉加载

    千次阅读 2019-09-18 17:13:51
    使用Vant的PullRefresh组件和List 组件 <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" ...
  • } /* 解决下拉刷新与滚动冲突的问题 */ .gzrwClass /deep/ .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; } .gzrwClass /deep/ .van-list { height: auto !important; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,003
精华内容 401
关键字:

vant下拉刷新