关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题
此图是最近做的项目中的一页,用的是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中一个页面有有多个页签进行切换的下拉刷新加搜索问题的更多相关文章
- Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题
所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...
- 关于mui 中popover与下拉刷新冲突问题
最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...
- mui 单页面下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- mui点击加载,下拉刷新,上下整合代码
mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- Mui 下拉刷新,刷新完成功能实现
Mui中,正在刷新后,就直接回弹了,没有刷新完成这个过程,然后我就在中间添加了一个过程. 代码如下: //-----------日期格式化------------- function form ...
- 使用mui.js实现下拉刷新
闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...
随机推荐
- python opencv识别蓝牌车牌号 之 取出车牌号 (1/3)
概述 车牌识别是计算机视频图像识别技术在车辆牌照识别中的一种应用,通常来讲如果结合opencv进行车牌识别主要分为四个大步骤,分别为: 图像采集 车牌定位 分割车牌字符 字符识别 当然,如果结合了机器 ...
- 开发并发布依赖包,作为工具包供别人npm install
1.初识包及 npm 包的概念: nodejs 中的第三方模块叫包 不同于 nodejs 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用 nodejs 中的包都是免费开源 ...
- think php 未登录,禁止访问页面 + 退出登录
1.首先在Local创建一个基类控制器 D:\PHP\phpstudy_pro\WWW\1906A\pyg>php think make:controller goods/Base --plai ...
- async-validator 源码学习(一):文档翻译
async-validator 是一个表单异步校验库,阿里旗下的 Ant-design 和 Element 组件库中的表单验证使用的都是 async-validator ,目前版本已更新到 4.0.7 ...
- 保姆级SpringBoot+Vue图片上传到阿里云OSS教程
小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...
- 淘宝 NPM 镜像站切换新域名啦
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 源起 淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前 ...
- 域渗透 | kerberos认证及过程中产生的攻击
文章首发于公众号<Z2O安全攻防> 直接公众号文章复制过来的,排版可能有点乱, 可以去公众号看. https://mp.weixin.qq.com/s/WMGkQoMnQdyG8UmS ...
- wifi钓鱼
无线网络的加密方式和破解方式 1.WEP加密及破解 1).WEP加密方式 有线等效保密(wired euivalent pricacy,WEP)协议的使用RC4(rivest cipher4)串流加密 ...
- IDEA的git的拉去提交Java day9
赶鸭子上架,没法子. 新的知识点24号继续学习,今天认真熟悉了以下IDEA,的git代码的提交和拉去,不过拉去下来的项目有些打开的问题有点多,还在继续解决中-- git知识明天一并上传博客.
- java面向对象思想之继承
一.什么是继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为.可以联系生活进行理解,相当于父亲和儿子的关系.父亲有的属 ...