mui点击加载,下拉刷新,上下整合代码
mui点击加载,下拉刷新,上下整合代码
mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些
代码应该是有些问题的,测到了大家就自己改下。
首先要说明的是,有下拉刷新的页面一定要是双webview形式
不然就会出现下拉把上一个窗口的页面给拉出来的情况
父view:messages.html
- <!DOCTYPE html>
- <html>
- <head>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title>消息</title>
- <script src="../js/rem.js"></script>
- <link href="../css/mui.min.css" rel="stylesheet" />
- <link rel="stylesheet" type="text/css" href="../css/style.css" />
- <link rel="stylesheet" type="text/css" href="../css/page.css"/>
- <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
- </head>
- </head>
- <body style="background: #fff;">
- <header class="mui-bar mui-bar-nav">
- <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
- <h1 class="mui-title">消息</h1>
- </header>
- <div class="mui-content">
- </div>
- </body>
- <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
- <script src="../js/mui.min.js"></script>
- <script type="text/javascript" src="../js/benben.js" ></script>
- <script type="text/javascript" src="../js/suyuan.js" ></script>
- <script type="text/javascript" src="../js/common.js"></script>
- <script>
- //启用双击监听
- mui.init({
- gestureConfig:{
- doubletap:true
- },
- subpages:[{
- url:'messages2.html',
- id:'messages2.html',
- styles:{
- top: '48px',
- bottom: '0px',
- }
- }]
- });
- var contentWebview = null;
- document.querySelector('header').addEventListener('doubletap',function () {
- if(contentWebview==null){
- contentWebview = plus.webview.currentWebview().children()[0];
- }
- contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
- });
- </script>
- </html>
子webview:messages2.html
- <!DOCTYPE html>
- <html>
- <head>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title>消息</title>
- <script src="../js/rem.js"></script>
- <link href="../css/mui.min.css" rel="stylesheet" />
- <link rel="stylesheet" type="text/css" href="../css/style.css" />
- <link rel="stylesheet" type="text/css" href="../css/page.css"/>
- <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
- </head>
- </head>
- <body style="background: #fff;">
- <div class="mui-loading" id="loading">
- <div class="mui-spinner">
- </div>
- </div>
- <div id="pullrefresh" class="mui-content" style="padding-bottom: 0;background: #fff;display: none;">
- <div class="message">
- <ul id="messagesList">
- </ul>
- <div class="mui-text-center">
- </div>
- <div class="mui-text-center">
- <div class="loadMore">
- 点击加载更多
- </div>
- </div>
- </div>
- </div>
- </body>
- <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
- <script src="../js/mui.min.js"></script>
- <script type="text/javascript" src="../js/benben.js" ></script>
- <script type="text/javascript" src="../js/suyuan.js" ></script>
- <script type="text/javascript" src="../js/common.js"></script>
- <script>
- $(function(){
- var message_list =$('.message');
- message_list.on('tap','li',function(e){
- if($(this).hasClass('on')){
- $(this).removeClass('on').find('.popover_article').hide();
- return false;
- }
- message_list.find('li').removeClass('on');
- message_list.find('.popover_article').hide();
- $(this).addClass('on').find('.popover_article').show();
- })
- });
- ca.init();
- mui.init({
- pullRefresh: {
- container: '#pullrefresh',
- down: {//下拉刷新
- contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
- contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
- contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
- callback: pulldownRefresh
- }
- }
- });
- setTimeout(function() {
- $('#loading').css('display','none');
- $('#pullrefresh').css('display','block');
- }, 800);
- //点击加载
- ca.click(ca.className('loadMore')[0],function(){
- if($('.loadMore').text() == '点击加载更多'){
- var loadStr = '';
- loadStr += '<div class="mui-loading" id="loading">';
- loadStr += '<div class="mui-spinner"></div></div>';
- $('.loadMore').html(loadStr);
- setTimeout(function(){
- $('.loadMore').html('点击加载更多');
- },500);
- pullupRefresh();
- }
- })
- /*
- * 下拉刷新具体业务实现
- */
- function pulldownRefresh() {
- setTimeout(function() {
- pageIndex = 1;//刷新并显示第一页
- type=1;//代表下拉刷新
- getMessages(type);//具体取数据的方法
- }, 500);
- }
- var pageIndex = 0;
- pullupRefresh();
- function pullupRefresh() {
- console.log(111);
- setTimeout(function() {
- pageIndex++;//翻下一页
- type=2;//代表上拉加载
- getMessages(type);//具体取数据的方法
- }, 500);
- }
- function getMessages(type){
- ca.get({
- url:suyuan.url+'api/personal/notify/',
- data:{
- pageIndex:pageIndex,
- },
- succFn:function(data){
- console.log(data);
- var data = JSON.parse(data);
- if(data.code == 1){
- //遍历数据
- var dataList = data.data;
- dataList = JSON.parse(dataList);
- var str = '';
- for(i in dataList){
- if(dataList.title != '' && dataList[i].content != null && dataList[i].content != undefined){
- str += '<li onclick="readed('+dataList[i].id+',this)">';
- str += '<div class="notice">';
- if(!dataList[i].read){
- str += '<span class="unread"></span>';
- }
- str += '<span class="iconfont icon-icon-tips"></span></div>';
- str += '<div class="msg_text">';
- str += '<h4>'+dataList[i].title+'</h4>';
- if(dataList[i].content == null || dataList[i].content == undefined){
- dataList[i].content = '';
- }
- str += '<p>'+dataList[i].content+'</p>';
- str += '<span class="time">15:31</span></div>';
- str += '<div class="popover_article">'+dataList[i].content;
- str += '</div></li>';
- }
- }
- if(type == 1){
- //下拉加载
- $('#messagesList').html('');
- $('#messagesList').append(str);
- mui.currentWebview.show(); //显示当前页面
- mui('#pullrefresh').pullRefresh().endPulldown();
- }
- if(type==2){//上拉加载
- $('#messagesList').append(str);
- mui.currentWebview.show(); //显示当前页面
- }
- data.code = 2;
- if(data.code == 1){
- $('.loadMore').html('点击加载更多');
- } else {
- $('.loadMore').html('没有更多数据了');
- // mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
- }
- mui.currentWebview.show(); //显示当前页面
- if(data.status!=1&&pageIndex==1){
- mui.currentWebview.show(); //显示当前页面
- }
- }else{
- $('.loadMore').html('没有更多数据了');
- }
- }
- });
- }
- if(mui.os.plus) {
- mui.plusReady(function() {
- setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 800);
- });
- } else {
- mui.ready(function() {
- mui('#pullrefresh').pullRefresh().pullupLoading();
- });
- }
- function readed(id,self){
- $.ajax({
- type:'delete',
- url:suyuan.url+'api/personal/notify/'+id,
- contentType:'application/json',
- dataType:'json',
- success:function(data){
- if(data.code == 1){
- $(self).find('.unread').remove('.unread');
- }
- },
- error:function(e){
- console.log(e.status);
- }
- })
- }
- </script>
- </html>
代码根据自己的需要自己调整即可
mui点击加载,下拉刷新,上下整合代码的更多相关文章
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
- APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- MUI上拉加载下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 利用iscroll实现上拉加载下拉刷新
1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...
- 移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
- MJRefresh(上拉加载下拉刷新)
整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...
随机推荐
- metasploit魔鬼训练营 (安全漏洞生命周期)
1,前期 渗透测试工程师在挖掘0day的出来的 2,前中期 在一个密封的团体里,互相交流,利用漏洞带来的价值和,金钱 3,中期 安全漏洞被披露!!黑客们快速掌握该漏洞 4,中后期 漏洞被制作成更为简单 ...
- linux下,文件的权限和数字对应关系详解
命令 chmod ABC file 其中A.B.C各为一个数字,分别表示User.Group.及Other的权限. A.B.C这三个数字如果各自转换成由"0"."1&qu ...
- [51nod1310]Chandrima and XOR
有这样一个小到大排列的无穷序列S:1, 2, 4, 5, 8......,其中任何一个数转为2进制不包括2个连续的1.给出一个长度为N的正整数数组A,A1, A2......An记录的是下标(下标从1 ...
- [51nod1610]路径计数
路径上所有边权的最大公约数定义为一条路径的值. 给定一个有向无环图. T次修改操作,每次修改一条边的边权,每次修改后输出有向无环图上路径的值为1的路径数量(对1,000,000,007取模). Inp ...
- 洛谷 P1219 八皇后【经典DFS,温习搜索】
P1219 八皇后 题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序 ...
- CodeForces-2015 HIAST Collegiate Programming Contest-Gym-100952A-Who is the winner?
A. Who is the winner? time limit per test 1 second memory limit per test 64 megabytes input standard ...
- js随机产生区间数
function selectFrom(startNumber, endNumber) { //1.从几开始 2.到几结束 var choice = endNumber - startNumber + ...
- load和DOMContenLoaded的区别
load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的. DOM文档加载步骤: (1)解析html结构 (2)加载外部脚本和样式表文件 (3)解 ...
- 跟我一起读postgresql源码(十三)——Executor(查询执行模块之——Join节点(上))
Join节点 JOIN节点有以下三种: T_NestLoopState, T_MergeJoinState, T_HashJoinState, 连接类型节点对应于关系代数中的连接操作,PostgreS ...
- win10安装配置jdk的环境变量
换了个硬盘,用上了win10,发现win10安装好jdk之后,配置环境变量这个相对于win7和xp还是有那么一丢丢区别的,趁着夜色,随笔一记. 1.安装jdk之后,或者也可以用之前安装好的文件夹,先记 ...