此图是最近做的项目中的一页,用的是mui结合vue,用了mui后,觉得是真心难用啊,先不说其他的,就光这个下拉刷新就让人奔溃了,问题层出不穷,不过最后经过努力还是摆平了哈。

1.每次切换到新的标签,都应该重置一下下拉刷新

toTop(){
var scroll= mui('#refreshContainer').scroll();
this.scroll.scrollTo(0,0,0)
that.currenSize=0
this.page=1
mui("#refreshContainer").pullRefresh().refresh(true);
},

2.调用列表的方法

getFoucus(focus,p){
this.current=focus
this.page=p
if(this.page==1){
this.toTop()
}
this.axios.post(this.api + "/project/projectList/getMyFocusOn",$.param({"itcode":this.userMessage.entityCode,'page':this.page,"pageSize":this.pageSize}))
.then(res => {
var result = res.data;
if (result.status == 0) {
this.requesting=false;
if(result.status==0){
this.requesting=false;
if(this.page==1){
this.projectList=result.page.list;
}else{
var lists=result.page.list
this.projectList=this.projectList.concat(lists)
}
this.title=$(".mui-active").html()
this.currenSize+=this.pageSize
this.total=result.page.total
} else {
mui.toast(result.message)
}
}
})
},

3.下拉执行的方法

pullRefresh(){
var vm=this;
mui("#refreshContainer").pullRefresh({
up:{
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback:function(){//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
setTimeout(()=>{
vm.page++
if(vm.currenSize>=vm.total){
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
}else{
vm.getFoucus(vm.current,vm.page)
}
this.endPullupToRefresh(false)
},300);
},
},
})
},

关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题的更多相关文章

  1. Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...

  2. 关于mui 中popover与下拉刷新冲突问题

    最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...

  3. mui 单页面下拉刷新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  5. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  6. mui点击加载,下拉刷新,上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  7. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  8. Mui 下拉刷新,刷新完成功能实现

    Mui中,正在刷新后,就直接回弹了,没有刷新完成这个过程,然后我就在中间添加了一个过程.   代码如下:   //-----------日期格式化------------- function form ...

  9. 使用mui.js实现下拉刷新

    闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...

随机推荐

  1. 【一】TSP、VRP、VRP模型介绍

    一. TSP问题数学模型 编辑 TSP,即Traveling Salesman Problem,也就是旅行商问题,又译为旅行推销员问题.货郎担问题,简称为TSP问题,是最基本的路线问题,该问题是在寻求 ...

  2. doctor学习(二) - contos7安装doctor

    1.更新update到最新的版本 yum  update 2.卸载老版本docker yum  remove docker  docker-common docker-selinux  docker- ...

  3. np.vectorize()和crosstab()和pivotTab()函数解释

    numpy.vectorize(pyfunc, otypes=None, doc=None, excluded=None, cache=False, signature=None) Parameter ...

  4. vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)

    这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来 --------------我是分割线------------------ 今天用到 ...

  5. OpenCv基础_四

    Harris角点检测 理解 内部点:蓝框所示,无论滑动窗口水平滑动还是竖直滑动,框内像素值都不会发生大的变化 边界点:黑框所示,滑动窗口沿着某一个方向滑动框内像素点不会发生大的改变,但是沿着另一个方向 ...

  6. Android 12(S) 图形显示系统 - BufferQueue的工作流程(十一)

    题外话 我竟然已经写了这个系列的十一篇文章了,虽然内容很浅显,虽然内容很枯燥,虽然内容也许没营养,但我为自己的坚持点赞! 一.前言 前面的两篇文章,分别讲解了Producer的处理逻辑和queue b ...

  7. Ubuntu20安装nodejs和npm并切换阿里源

    参考 阿里巴巴开源镜像站 Ubuntu20安装npm并切换阿里源 安装直接在终端执行 sudo apt-get install nodejs npm没有安装上就执行 sudo apt-get inst ...

  8. linux内存(一) 内核空间与用户空间

    来自如下网站 https://www.cnblogs.com/sparkdev/p/8410350.html 内核空间和用户空间 对 32 位操作系统而言,它的寻址空间(虚拟地址空间,或叫线性地址空间 ...

  9. Flask(Jinja2) 服务端模板注入漏洞

    原理 参考文章: https://www.blackhat.com/docs/us-15/materials/us-15-Kettle-Server-Side-Template-Injection-R ...

  10. Mod_Security 安装配置

    Mod_Security 安装配置 OS平台:Ubuntu 16 服务器:Apache2 一.更新Ubuntu apt-get更新源 sudo mv /etc/apt/sources.list /et ...