为啥使用mui的上拉刷新下拉加载后在电脑上的刷新加载正常手机上就不正常了

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥使用mui的上拉刷新下拉加载后在电脑上的刷新加载正常手机上就不正常了相关的知识,希望对你有一定的参考价值。

同问,我也遇到了,我的是上拉加载可以,下拉刷新不行,我用的mui 参考技术A 我的是只要代码修改保存后手机上就失灵,必须重新打包。 参考技术B 你们的 是不是在android端 不支持? 参考技术C 你好,你这个问题解决了没,怎么解决的,可以说一下吗,我已经困扰了好多天了 参考技术D 你好,解决了没有呢

Vue 利用Vant组件实现数据的上拉刷新,下拉加载

html代码

用到了vant组件
vant文档地址

<template>
  <div class="home">
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
               <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
               >
                   <div class="middle-list_item" v-show="listShow" v-for="(item,key) in firstArrSure" :key="key">
                        <span class="list-titleLeft">{{item.ID}}</span>
                   </div>
               </van-list>
      </van-pull-refresh>
  </div>
</template>      
js代码

// js 用到的代码,用到的axios和vant插件都是全局导入的

<script>
  export default {
    name: "home",
    data() {
      return {
        show: false,
        loading: false,
        finished: false,
        refreshing: false,
        firstArrSure:[],
        page: 1,
        pagesize: 5
      };
    },
    created() {
      this.onRefresh();
    },
    methods: {
      onLoad() {
        // 异步更新数据
        let res = {};
        let self = this;
         this.$axios.post("xxxxxxxxxxxx", {
          requestData: res
        }).then(data => {
            data=JSON.parse(data);
            if (
              data.Result == null ||
              data.Result == undefined ||
              data.Result.length <= 0
            ) {
              self.message = "没有已完成的任务单";
            }else{
              if (self.page > 1) {
                self.firstArrSure = [...self.firstArrSure, ...data.Result]
              } else {
                self.firstArrSure = data.Result
              }
              // console.log("self.firstArrSure");
              // console.log(self.firstArrSure);
              let counts=self.firstArrSure[0].RowCounts;

              // 加载状态结束
              self.loading = false;
              // 如果当前页数 = 总页数,则已经没有数据
              if (Math.ceil(counts/self.pagesize) === Math.ceil(self.firstArrSure.length / self.pagesize)) {
              	 self.finished = true
              }
	      // 未完成加一页
              if (Math.ceil(counts/self.pagesize) > self.page) {
              	  self.page++
              }
              console.log("总页数:"+ Math.ceil(counts/self.pagesize));
              console.log("当前页数:"+ Math.ceil(self.firstArrSure.length / self.pagesize));
              console.log("总行数:"+counts+",页码:"+self.pagesize+",渲染行数"+self.firstArrSure.length);
            }
		})
      },
      onRefresh() {
          // 清空列表数据
          this.finished = false;
          this.pagesize = 5;
          this.page =1;
          // 重新加载数据
          // 将 loading 设置为 true,表示处于加载状态
          this.loading = true;
          this.onLoad();
          let self=this;
          setTimeout(function(){
            self.loading = false,
            self.finished = false,
            self.refreshing = false
          },1000)
       }
    }
  };
</script>

以上是关于为啥使用mui的上拉刷新下拉加载后在电脑上的刷新加载正常手机上就不正常了的主要内容,如果未能解决你的问题,请参考以下文章

MUI - 上拉刷新/下拉加载

vux scroller怎么实现功能上的上拉刷新 下拉加载

iOS常用刷新控件(下拉、上拉)详解

单webview上拉刷新下拉加载

Vue 利用Vant组件实现数据的上拉刷新,下拉加载

Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载