MUI-上拉刷新和下拉刷新

上（下）拉刷新代码一

<script type="text/javascript">mui.init({pullRefresh : {// 定义容器container:'#refreshContainer',// 往下拉（callback：回调函数）down : {// style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式// color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色// height:'150px',//可选,默认50px.下拉刷新控件的高度,// range:'100px', //可选 默认100px,控件可下拉拖拽的范围// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置// auto: true,//可选,默认false.首次加载自动上拉刷新一次callback :pulldownRefresh},// 往上拉（callback：回调函数）up : {callback :pullupRefresh }}}); // 定义下拉回调函数function pulldownRefresh(){alert("进行下拉数据刷新");// 下拉刷新结束mui('#refreshContainer').pullRefresh().endPulldownToRefresh();}// 定义上拉回调函数function pullupRefresh(){alert("进行上拉数据加载");// 下拉刷新结束mui('#refreshContainer').pullRefresh().endPullupToRefresh();}
</script>

上（下）拉刷新代码二（刷新的同时新增一段内容）

<script type="text/javascript">mui.init({pullRefresh : {container:'#refreshContainer',down : {callback :pulldownfresh},up : {callback :pullupfresh }}})function pulldownfresh(){// 延迟执行setTimeout(function(){var friendlist = document.body.querySelector(".friendlist");var liNode = document.createElement("li");liNode.className = "mui-table-view-cell mui-media";liNode.innerHTML = "<a href='javascript:;'>"+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"+ "<div class='mui-media-body'>" + "银行信用卡"  + "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"+ "</div></a>";// 将新创建的节点添加到当前界面的第一个节点中friendlist.insertBefore(liNode,friendlist.firstChild);// 终止刷新，不然会一直刷新mui('#refreshContainer').pullRefresh().endPulldownToRefresh();              },1500);}function pullupfresh(){setTimeout(function(){var friendlist = document.body.querySelector(".friendlist");var liNode = document.createElement("li");liNode.className = "mui-table-view-cell mui-media";liNode.innerHTML = "<a href='javascript:;'>"+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"+ "<div class='mui-media-body'>" + "银行信用卡"  + "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"+ "</div></a>";// 将新创建的节点添加到当前界面的最后一个节点中friendlist.appendChild(liNode);// true表示没有更多的数据mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);},1500);}
</script>

相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值（打开新的子页面）
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包，一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车

MUI-上拉刷新和下拉刷新相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
Android PullToRefreshListView上拉刷新和下拉刷新
PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
uniapp实现上拉刷新，下拉加载
上拉刷新,下拉加载这个功能实际上在我们的应用当中使用范围是很广的,比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能,那么如何实现呢? 首先遇到这个功能我就去搜插件市场了.经过我下载了不少的插 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
Android 智能上拉加载下拉刷新框架之SmartRefreshLayout
1.说明: SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer.它不只是支持所有的View,还支持多层嵌 ...
自定义listview完成上拉刷新，下拉加载的功能，重写ontouchevent方法
最近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多. 新浪微博就是使用这种方式的典型. 当用户从网络上读取微博的时 ...

MUI-上拉刷新和下拉刷新

MUI-上拉刷新和下拉刷新相关推荐

最新文章

热门文章