此图是最近做的项目中的一页,用的是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. 普通web整合quartz跑定时任务

    一.场景(什么时候用到定时任务) 文件跑批,定时处理数据,和业务解耦的场景 二.目前都有哪些工具可以定时处理数据 1.jdk的timertask:数据量小的情况下,单线程的 2.kettle:比较适合 ...

  2. php压缩zip文件类

    使用文件压缩类, 注意传的路径是相对路径.如果传绝对路径就把addFile里面的第二个参数去掉/ $zip = new ZipFolder(); $zipFile = './autoloadClass ...

  3. vue全局引入公共scss样式,子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  4. Mybatis 多对一和一对多 学习总结04

    1.Mybatis 组件的声明周期 ​ 声明周期是组件的重要问题,Mybatis也常用语多线程环境,错误使用会造成多线程并发问题,为正确编写Mybatis应用程序,我们要掌握Mybatis组件的声明周 ...

  5. JVM探究 面试题 JVM的位置 三种JVM:HotSpot 新生区 Young/ New 养老区 Old 永久区 Perm 堆内存调优GC的算法有哪些?标记清除法,标记压缩,复制算法,引用计数法

    JVM探究 面试题: 请你弹弹你对JVM的理解?Java8虚拟机和之前的变化更新? 什么是OOM?什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何 ...

  6. Mysql-基础-DDL-数据定义语言

    一.SQL通用语法 SQL 语法可以单行或者多行书写,以分号结尾. SQL 语句可以使用空格/缩进来增强语句的可读性. Mysql 数据库的 SQL 语句不区分大小写,关键字建议使用大写. 注释: 单 ...

  7. 如何用Google Drive下载超大型文件

    本文将对「如何下载Google Drive中的超大型文件?」这一问题展开探索和解决. 太长不读:直接看这里 情景与问题 在AI.系统安全等研究领域,一项研究成果的产生需要大量的数据样本进行训练和分析, ...

  8. RabbitMQ入门-5.6-课堂笔记-01

  9. 6月26日 Django 中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...

  10. WAF绕过的各种姿势

    主要思路: 根据WAF部署位置,针对WAF.WEB服务器.WEB应用对协议解析.字符解析.文件名解析.编码解析以及SQL语法解析的差异,绕过WAF,将payload送至服务器执行. 常用绕过方法: 1 ...