mui的上拉加载下拉刷新的实现

最新推荐文章于 2024-05-22 18:38:38 发布
最新推荐文章于 2024-05-22 18:38:38 发布
阅读量1.2w 收藏 6
点赞数 1
分类专栏： mui 文章标签： mui 上拉加载 下拉刷新 实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36073929/article/details/53905842
版权

----

效果图

----
用的是mui框架。（我自己不会，朋友教我的。这篇可能不是很好，希望能对你有所帮助。）


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css"/>   
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css"/>
<title>我的报修工单</title>
</head>
<body>
<script src="ByFrame/js/jquery.min.js?v=2.1.4"></script>
<!--    ############ 分割线  #############     -->
 <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle weui-icon_toast"></i> <p class="weui-toast__content">已完成</p> </div> </div> <!--end toast--> <!--BEGIN error 错误d--> <div id="error" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast" style="min-height:1.8em"> <p id="errorInfo">系统错误</p> </div> </div> <!--end toast-->
<!--    ############ 分割线  #############     -->
</body><!-- 微信里面的方法 --><script type="text/javascript" src="WEIXIN/js/mui.js"></script><script type="text/javascript" src="WEIXIN/js/zepto.min.js"></script><script type="text/javascript" src="js/wx_workTab
最低0.47元/天 解锁文章
我本名叫一休
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
下拉刷新新样式
01-30
改写下拉刷新 下拉显示部分布局后 布局消失
MUI 上拉加载分页
李特成的博客
06-21 2570
mui('#ds_company_user').pullRefresh({ up: { height: 50, auto: true, contentrefresh: "正在加载...", contentnomore: "没有更多数据了...
如何实现上拉加载，下拉刷新？
最新发布
林恒的博客
05-22 905
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用。
mui上拉加载分页
weixin_43942765的博客
06-24 187
不多说直接上代码 HTML部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-wid
mui下拉加载、上拉刷新(包括分页，vue.js)
qq_34153567的博客
08-23 1910
mui下拉加载上拉刷新包括分页vuejs 一资料参考 二实现步骤 HTML内容 通过muiinit方法中pullRefresh参数配置各项参数 下拉刷新具体业务实现 上拉加载具体业务实现 自动下拉刷新 到接口取数据mui下拉加载、上拉刷新(包括分页，vue.js)一、资料参考 官方文档：http://dev.dcloud.net.cn/mui/pulldown/ 二、实现步骤1.HTML内容（最好按
mui 上拉加载 实现分页加载功能
白高林的专栏
08-05 897
mui 上拉加载 实现分页加载功能 分页功能（上拉加载）： 1、引入需要的css、js文件 <link href="static/css/mui.css" rel="stylesheet" /> <!-- js --> <script src="static/js/jquery-3.2.0.js"></script> <script src="static/js/mui.min.js"></script> 2、dom结构
MUI实现上拉加载和下拉刷新效果
08-30
主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MUI选项卡下拉刷新上拉加载demo
12-10
这是一个基于mui框架下实现的一个上拉刷新，下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感，减少服务器的压力~
MUI 上拉刷新/下拉加载功能实例代码
08-30
`down.callback`用于定义下拉刷新的回调函数，`up.callback`则用于上拉加载的回调函数。 3. **回调函数实现**：`pulldownRefresh()`和`pullupRefresh()`是两个关键的回调函数。`pulldownRefresh()`通常用来模拟数据...
MUI整合上拉下拉的写法
08-28
需要注意的是，在实现上拉加载和下拉刷新时，需要先学习如何把上拉加载和下拉刷新分开的情况，然后才能实现整合的写法。同时，需要了解MUI的相关知识和JS相关的上拉加载和下来刷新的实现方式。 MUI中的上拉下拉整合...
mui上拉加载更多下拉刷新数据的封装过程
08-28
mui的上拉加载和下拉刷新类似，都属于pullRefresh插件。今天小编抽空给大家分享mui上拉加载更多下拉刷新数据的封装过程，需要的朋友参考下吧
mui框架实现分页功能（上拉加载，下拉刷新）以及点击事件的实现
热门推荐
猿飞梦的博客
08-29 1万+
mui是一个类似于原生的UI框架，使用它可以实现更多接近原生的功能。今天要讲的是mui的分页功能（上拉加载）： 1、首页需要引入mui.js这个去官网可以下载的 2、需要用mui标签将大的盒子包裹起来： &lt;div id="refreshContainer" class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt;...
mui上拉加载
weixin_42834575的博客
07-30 658
HTML： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-
页面上拉加载数据(也就是上拉实现分页)
Hello的博客
10-18 4761
 之所以发这个博客是因为网上百度了太多  没法直接套用  所以写这个   可以直接套用   先上代码截图 &lt;script type="text/javascript"&gt; //最大页数 var mix = "${pageInfo.pages}"; var page = "${pageInfo.pageNum}"; var rows = "${pageInfo.pageSize}"; ...
mui下拉加载 php,MUI整合上拉下拉的写法
weixin_35621342的博客
04-08 104
在APP制作过程中，下拉刷新和上拉加载时一直配合使用的一对功能，在之前我们给大家分享过用JS相关的上拉加载和下来刷新，有兴趣的朋友可以参考：MUI进行APP混合开发实现下拉刷新和上拉加载我们先看开下如何在MUI中使用整合的上拉下拉第一步，第二步和下拉刷新一样mui.init({subpages:[{url:pullrefresh-subpage-url,//下拉刷新内容页面地址id:pullref...
MUI下拉刷新
杨葱儿
02-26 1833
//下拉刷新 mui.init({ pullRefresh : { container:"#cont",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 down : { style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式 color:'#00C0DD', //...
mui实现上拉刷新与下拉加载功能
浪子四方
08-15 1038
引言 下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能，在电脑端我们常常通过点击分页的形式来向用户展示更多内容，不过在移动端我们可不想有这些多余的点击操作，只要想看更多内容只要下拉话上拉就可以了，这个小技巧可以大大的提高用户体验，下面我们来简单的了解一下MUI是如何实现这两种功能的。 关键点1： 初始化下拉刷新与上拉加载功能 mui.init({ pullRefresh...
mui上拉刷新和下拉加载
SanPhantom的博客
09-27 510
mui是h5十大框架之一。很好用，但是针对不同的场景，文档的描述不够我们理解。 场景：通过mui的上拉加载更多数据，下拉刷新回刚刚进入当前页面的状态。笔者设置每次上拉就清空旧页面的内容，把新加载的10条数据渲染到页面上，当下拉时候，恢复到第一次加载的状态。 问题：当上拉加载的数据达到最多时候，通过 mui('#pullrefresh').pullRefresh().endPullupToRefre...
利用MUI实现下拉刷新
blackberry的博客
10-09 2008
List of agents                                              作者：1729058026@qq.com                 时间：2017-09-18                 描述：此页面是补充already的实际操作             -->         返回      
mui的下拉刷新实现
06-02
<h1 class="mui-title">MUI下拉刷新实现示例 <div class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li class="mui-table-view-cell">列表项1 <li class="...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值