此图是最近做的项目中的一页,用的是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. Objective-C 基础教程第六章,源文件组织

    目录 Object-C 基础教程第六章,源文件组织 0x00:前言 0x01:Xcode创建OC类 0x02:Xcode群组 0x03 Xcode跨文件依赖关系 @class关键字 导入和继承 小结 ...

  2. 4.功能三:实现URL地址栏控制(15分) (1)获取到当前访问的控制器和方法(5分) (2)对当前访问的控制器和方法进行判断,有权限继续访问(5分) (3)无权限给出提示(5分)

    <?php namespace app\admin\controller; use think\Controller; use think\Request; class Base extends ...

  3. 图解|用好MySQL索引,你需要知道的一些事情

    我是蝉沐风. 这一篇文章来聊一聊如何用好MySQL索引. 为了更好地进行解释,我创建了一个存储引擎为InnoDB的表user_innodb,并批量初始化了500W+条数据.包含主键id.姓名字段(na ...

  4. 七天接手react项目 —— state&事件处理&ref

    state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...

  5. 除了增删改查你对MySQL还了解多少?

    目录 除了增删改查你对MySQL还了解多少? MySQL授权远程连接 创建用户.授权 客户端与服务器连接的过程 TCP/IP 命名管道和共享内存 Unix域套接字文件 查询优化 MySQL中走与不走索 ...

  6. Azure DevOps (七) 通过SSH部署上传到服务器的应用

    上一篇中,我们实现了通过FTP把流水线编译出来的制品上传到我们的公网服务器上,这一篇我们来研究一下通过azure的ssh连接到服务器 把应用在服务器上运行起来. 首先,我们书接上文,在release流 ...

  7. js学习笔记-Java script正则表达式

    创建正则表达式 js中的正则包含在两个斜杠之间:/abc+v/ 正则中的特殊字符 \: 1.当后面不是特殊字符时表示字符边界 2.当后面是特殊字符时表示转义 ^: 1.匹配首位,例如,/^A/ 并不会 ...

  8. Spring Boot 传参 序列化和反序列化

    序列化 反序列化

  9. 文件下载文件名包含中文时,乱码的处理方法(url编解码)

    utf-8/gbk编码 "中"这个汉子的utf-8编码为:E4B8AD gbk编码为:D6D0 urlencode 经过urlencode编码后, %E4%B8%AD %D6%D0 ...

  10. Mybatis的XML文件调用静态方法

    如果需要在Mapper文件中调用静态方法,需要 <choose> // 需要静态方法返回true还是false <when test="@staticClass@stati ...