h5 app 实现页面刷新

在h5写的app基础上实现下拉刷新功能

前言：做app时候，使用的是h5写的，也没有使用任何的框架，但现在有个新的需求，实现下拉刷新页面，这时候，需要引入mui来实现这个功能。

实现步骤如下：

先在head头部引入mui.css文件

<link rel="stylesheet" href="../lib/mui.css">

在index.html底部引入mui.js文件

<script src="../lib/mui.min.js"></script>

页面html 内容

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!--数据列表--><ul class="index_ul mui-table-view mui-table-view-chevron"></ul></div>
</div>

在需要的页面js实现下拉刷新功能

mui.init({pullRefresh: {container: '#pullrefresh',down: {auto: true,callback: pulldownRefresh,contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容},// up: {//   contentrefresh: '正在加载...',//   callback: pullupRefresh// }}});
/*** 下拉刷新具体业务实现*/function pulldownRefresh() {setTimeout(function() {console.log('实现了下拉刷新......')mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed}, 1500);}if (mui.os.plus) {mui.plusReady(function() {setTimeout(function() {mui('#pullrefresh').pullRefresh().pullupLoading();}, 1000);});} else {mui.ready(function() {mui('#pullrefresh').pullRefresh().pullupLoading();});}

总结：以上就是实现app下拉刷新的功能

注：此文章是开发项目过程中使用总结的，方便日后再次使用。

心情：想下班啦

h5 app 实现页面刷新相关推荐

从微信跳转第三方app：在微信打开h5页面后，点击触发跳转自己app指定页面
今天,朋友发来一条拼多多砍价消息,点击链接跳转到下面的H5页面,点击允许,跳转到拼多多的App Store页面,到这都很正常对吧,神奇的是点击打开后跳转到了指定的页面,不只是简单的打开app 想了下他 ...
Android 通过短信(H5)跳转到App指定页面
最近公司为了增加用户活跃度,新增了许多活动,要求从多种方式可以跳转到App的指定页面.比如闪屏页.首页弹框.首页banner.webView.极光推送消息点击跳转以及通过短信跳转到App. 对此,我们 ...
h5跳转到 google play 应用商店的APP详情页面
前段时间做了在h5页面中打开或者下载app的功能参考了咸鱼的提示短信短连接页面,西瓜视频页面,等等. 最后根据公司的市场和场景,计划从h5直接跳转到google应用市场的app详情页面. https ...
H5 引用vue 打开app（如何该手机内有某个app则直接打开app，如果没有则跳转app下载页面）
H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址和 ios对应的app协议 ), ...
uniapp H5+锁定和解除锁定屏幕方向及关闭应用启动界面及页面刷新
锁定屏幕方向 plus.screen.lockOrientation( String orientation ); 说明: 锁定屏幕方向后屏幕只能按锁定的屏幕方向显示,关闭当前页面后仍然有效. 可再次 ...
html 如何让div刷新页面,页面刷新.html
页面刷新 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
H5+App后台持续定位功能实现
H5+App后台持续定位功能实现 1. 项目需求 2. 实现过程 3.最终实现 4. 关于测试用例 1. 项目需求最近有个需求就是需要完成在后台的实时定位,并且要将获取到的定位信息写到Map控件上去 ...
最新 vue2.x 仿饿了么app商家页面项目总结
最新vue2.x仿饿了么app 商家页面项目总结标签(空格分隔): vuejs 前言仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue- ...
Vue 强制页面刷新（provide 和 inject）
一.常规方法 location.reload(); this.$rotuer.go(0); 存在问题: 1.强制刷新页面,出现短暂的空白闪烁. 2.h5页面在安卓机方法不兼容. this.$rotue ...

h5 app 实现页面刷新

在h5写的app基础上实现下拉刷新功能

h5 app 实现页面刷新相关推荐

最新文章

热门文章