此图是最近做的项目中的一页,用的是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. (七)目标检测算法之SSD

    系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...

  2. PHP魔术方法11种

    1.构造函数:__construct(): 构造函数是类中的一个特殊函数,当我们使用new关键字实例化对象时,相当于调用了类的构造函数. function __construct($name){ $t ...

  3. 07 Java的方法 何谓方法

    Java的方法 1.何谓方法 System.out.println(); 那么它是什么呢? System是系统的类,out是System下的一个输出对象,println()就是一个方法 类.对象.方法 ...

  4. Go 1.18 最强代码自测方法!

    特别说明:这个真的不是标题党,我写代码20+年,真心认为 go fuzzing 是我见过的最牛逼的代码自测方法.我在用 AC自动机 算法改进关键字过滤效率(提升~50%),改进 mapreduce 对 ...

  5. LGP4841题解

    无向联通图计数板子 首先,这个太难了,先让我们来求一个简单的: 无向图计数. 一共 \(\frac {n \times (n+1)} 2\) 条可能存在的边,枚举一条边是否存在,就有 \(2^{\fr ...

  6. Net6 Configuration & Options 源码分析 Part2 Options

    Net6 Configuration & Options 源码分析 Part2 Options 第二部分主要记录Options 模型 OptionsConfigurationServiceCo ...

  7. stash —— 一个极度实用的Git操作

    今天要介绍的 Git 操作就是 stash,毫不夸张地说,每个用 Git 的开发人员都一定要会懂怎么使用. 在介绍之前,不知道你有没有和我一样的经历:某一天,我正在一个 feature 分支上高高兴兴 ...

  8. Maven——setting.xml配置

    <settings> <localRepository>C:\Users\gcl\.m2\repository</localRepository> <serv ...

  9. Shell:常见错误总结(一)

    Blog:博客园 个人 译自BashPitfalls 本文总结了编写Shell脚本中的常见错误. for f in $(ls *.mp3) 最常犯的错之一就是编写这样的循环: for f in $(l ...

  10. 浅析MySQL恶意服务器读取文件原理

    前言 注:本文不涉及对MySQL协议报文研究,仅讲解原理,并且做部分演示. 搭建MySQL恶意服务器读取文件这件事,虽然直接利用门槛较高,但是由于在网上看到了一种比较新颖的利用方式(利用社会工程学引诱 ...