MUI 上拉加载 始终显示在页面顶部

稍微往上一拉就会触发
贴代码,显示效果,求解
图片说明


    <body style="height: 100%;">  
        <script src="../js/mui.js"></script>  
        <script type="text/javascript">  
            mui.init();  
        </script>  

        <!-- <header id="header" class="mui-bar mui-bar-nav navbar">  
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-left mui-action-back" id="cancelbtn">返回</button>  
            <h1 class="mui-title navtitle">备件领退用记录</h1>  
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="savebtn">申请</button>  
        </header> -->  

        <div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="">  
            <div class="mui-scroll" id="scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 50px;">  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                </ul>  
            </div>  
        </div>  

        <script>  
            //公共变量  
            var fromsource = '维修';  
            var eqfiDevicename = '';  
            var eqfiDepartmentnum = '';  
            var maliId = '';  
        </script>  

        <script>  
            mui.init({  
                pullRefresh: {  
                    container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                    down: {  
                        style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式  
                        color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色  
                        height: '50px', //可选,默认50px.下拉刷新控件的高度,  
                        range: '100px', //可选 默认100px,控件可下拉拖拽的范围  
                        offset: '0px', //可选 默认0px,下拉刷新控件的起始位置  
                        auto: false, //可选,默认false.首次加载自动上拉刷新一次  
                        callback: function() {  

                        }  
                    },  
                    up: {  
                        height: 50,  
                        auto: false,  
                        contentrefresh: '正在加载...',  
                        contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;                          
                        callback: function() {  
                            console.log($('#refreshContainer').css('height'));  
                            console.log($('#scroll').css('height'));  
                        }  
                    }  
                }  
            });  
        </script>  
    </body>  

</html>  

1个回答

在线等答案~~~~~

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
mui上拉下拉页面卡如何解决
-
MUI中上拉加载下拉刷新容器中onclick无法调用问题
-
通过mui.openWindow()的extra传递到新页面的array,怎么在新页面显示
-
用mui做的把两个页面连接起来实现不同页面事件的触发
-
mui 页面跳转后加载数据,返回后的页面刷新,这是手机app
-
mui下拉刷新列表显示不到底部
-
mui 底部选项卡webview模式 页面跳转问题
-
MUI的Picker组件在IOS11上滑动显示不全怎么解决?
-
mui 如何在tab选项卡滚动至顶部并且固定之前禁止tab选项卡中mui-slider-group部分出现滚动?
-
用mui.openwindow跳转页面,但是跳转了都没有底部菜单。想跳转了底部菜单显示,并选中对应的项。要怎么做?
-
mui 安卓页面无法滚动
-
关于mui的页面传值问题
-
mui如何动态切换子页面
-
问一个mui ui 页面传值的问题
-
怎么把mysql数据库中的图片显示在mui的界面上
-
vue-cli使用mui上下拉,只能触发上拉,触发不了下拉?
-
vue+mui的APP在苹果手机上无法下载附件。
-
jsp页面怎么使用mui.openwindow()方法??传值怎么传 萌新求教!!
-
MUI框架的上啦加载功能
-
Linux文件操作高频使用命令
文章目录0.新建操作:1.查看操作2.删除操作3.复制操作4.移动操作:5.重命名操作:6.解压压缩操作 0.新建操作: mkdir abc #新建一个文件夹 touch abc.sh #新建一个文件 1.查看操作 查看目录: ll #显示目录文件详细信息 查看文件内容: cat|head|tail命令 cat abc.txt #查看abc的内容 head -5 abc.txt #...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点
目录 1、BMP格式图像 2、GIF格式图像 3、TIFF格式图像 4、PNG格式图像 5、JPG格式图像 6、SVG格式图像 7、总结 7.1、有损vs无损 7.2、索引色vs直接色 7.3、点阵图vs矢量图 7.4、总结 一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像...
高级软件工程师教会我的那些事儿
【CSDN编者按】以人为鉴,可明得失。对于新手程序员来说,面对复杂的开发需求很容易因为经验不足或技术不够娴熟等原因而踩坑。本文的作者表示:坐在高级软件工程师旁边工作或许可以事半功倍!长达一年的观察学习,他收获了包括编写代码、测试、设计、部署以及监控的一系列的长足进步。 声明:本文已获作者翻译授权,原文(https://neilkakkar.com/things-I-learnt-from-...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
黑客入门,从HTB开始
Hack the box 是国外的一个靶机平台,里面的靶机包含多种系统类型,并且里面可以利用的漏洞类型多种多样,有很多靶机其实非常贴近实战情景。因此 HTB 是一个很好的学习渗透测试靶场。 之前在 HTB 也玩过一些机器。里面的机器难度有好几个档次,insane 难度的一般都是极其困难的,这种机器一般让我对着大神的 Writeup 我可能都没有办法复现出来。之前也有在公众号上分享过几篇 H...
动画:用动画给女朋友讲解 TCP 四次分手过程
作者 | 小鹿 来源 | 公众号:小鹿动画学编程 写在前边 大家好,我们又见面了,做为一个业余的动画师,上次的用动画的形式讲解 TCP 三次握手过程再各大平台收到了广大读者的喜爱,说文章有趣、有货、有内容,也受到了很多读者的关注。很多读者留言说什么时候用动画讲一讲 TCP 四次挥手的过程,为了应大家的要求,今天我们就生动有趣的用动画给大家分享 TCP 四次挥手(分手)过程。 动画:用动画给...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
SQL基本语法入门 看这里就够了
SQL执行顺序 第一步:执行FROM 第二步:WHERE条件过滤 第三步:GROUP BY 分组 第四步:执行SELECT 投影列 第五步:HAVING条件过滤 第六步:执行ORDER BY排序 一、创建、删除库 -- 创建新数据库 CREATE DATABASE 数据库名; -- 删除数据库 DROP DATABASE 数据库名; 二、增加 1、添加列名、设置主键、设...
如何优化MySQL千万级大表,我写了6000字的解读
这是学习笔记的第2138篇文章 千万级大表如何优化,这是一个很有技术含量的问题,通常我们的直觉思维都会跳转到拆分或者数据分区,在此我想做一些补充和梳理,想和大家做一些这方面的经验总结,也欢迎大家提出建议。 从一开始脑海里开始也是火光四现,到不断的自我批评,后来也参考了一些团队的经验,我整理了下面的大纲内容。 既然要吃透这个问题,我们势必要回到本源,我把这个...
面试最后一问:你有什么问题想问我吗?
尽管,我们之前分享了这么多关于面试的主题: 高薪必备的一些Spring Boot高级面试题 面试必问:设计模式遵循的面向对象设计原则! 面试必问:怎么保证缓存与数据库的双写一致性? 27道高频Spring面试题,你能答对几个? 唠唠面试常问的:面向对象六大原则 一文高效图解二叉树面试题 Java面试中最高频的那20%知识点是什么? 百度面试题:求数组最大值 ... 然而,最后这个90%可见...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
Linux/C/C++ 不可错过的好书
来源:公众号【编程珠玑】 作者:守望先生 ID:shouwangxiansheng 前言 经常有读者让我推荐书籍,这次我就把我私藏的计算机书单分享给你们!不过由于时间匆忙,不会进行更加详细的介绍。 声明 由于每个人的情况不一样,推荐的书并不一定适合你,也不一定适合当前阶段的你,有的书籍可能存在内容重复,所以根据自己的阶段情况进行选择即可。虽说如此,以下书单中提单的书均为优质书籍。...
计算机处理器基础原理笔记
一、CPU指令电路 1. 计算机每执行一条指令的过程,可以分解成这样几个步骤。 (1)Fetch(取得指令),也就是从PC寄存器里找到对应的指令地址,根据指令地址从内存里把具体的指令,加载到指令寄存器中,然后把PC寄存器自增,在未来执行下一条指令。 (2)Decode(指令译码),也就是根据指令寄存器里面的指令,解析成要进行什么样的操作,是MIPS指令集的R、I、J中哪一种指令,具体要操作哪...
单点登录(SSO)
一、SSO(单点登录)介绍 SSO英文全称Single SignOn,单点登录。SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。它是目前比较流行的企业业务整合的解决方案之一。 实现机制 当用户第一次访问应用系统1的时候,因为还没有登录,会被引导到认证系统中进行登录;根据用户提供的登录信息,认证...
漫话:什么是 https ?这应该是全网把 https 讲的最好的一篇文章了
今天这篇文章,讲通过对话的形式,让你由浅入深着知道,为什么 Https 是安全的。 一、对称加密 一禅:在每次发送真实数据之前,服务器先生成一把密钥,然后先把密钥传输给客户端。之后服务器给客户端发送真实数据的时候,会用这把密钥对数据进行加密,客户端收到加密数据之后,用刚才收到的密钥进行解密。如图: 当然,如果客户端要给服务器发送数据,也是采用这把密钥来加密,这里为了方便,我采用单方向...
HTML CSS整理笔记
常见字体单位: 1.em 移动端常用的字体尺寸单位,说白em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。 但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小...
相关热词 c# 增加元素 c#控制台简单加法 c# 服务端框架 c# 判断事件是否注册 c#中is和has c# udp 连接超时 c#词典 c#实现排列组合 c# oss 上传 c#判断输入的是否为ip