<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/rem.js"></script>
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/cc.css">
</head>
<body>
<div class="g my-love">
    <!--头部-->
    <header class="header">
        <a href="#"> <span class="mui-icon mui-icon-arrowleft  arrowleft fl"></span></a>
        <a class="tx-center" href="#">我的收藏</a>
        <a href="#"></a>
    </header>
    <!--头部end-->
    <!--选项卡-->
    <div class="tab">
        <span class="active">线路</span>
        <span>供应商店铺</span>
        <div class="line"></div>
    </div>
    <!--选项卡end-->
    <!--列表-->
    <div class="listitem">
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper w-list">
            <div class="mui-scroll">
                <!--数据列表-->
                <div class="listitem-content">
                    <ul class="table-view mui-table-view-chevron">
                        <!--li项目-->
                        <a href="#">
                            <li class="view-cell clearfix">
                              <div class="fl line-itemL">
                                  <div class="line-itemimg">
                                      <img src="../images/dingdan_img_1.png" />
                                      <p>上海出发</p>
                                  </div>
                              </div>
                              <div class="fl line-itemR">
                                    <h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
                                    <p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
                                    <div class="lineprice"><span>￥<em>5999</em></span>起</div>
                               </div>
                            </li>
                        </a>
                        <div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
                        <!--li项目end-->
                        <!--li项目-->
                        <a href="#">
                            <li class="view-cell clearfix">
                                <div class="fl line-itemL">
                                    <div class="line-itemimg">
                                        <img src="../images/dingdan_img_1.png" />
                                        <p>上海出发</p>
                                    </div>
                                </div>
                                <div class="fl line-itemR">
                                    <h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
                                    <p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
                                    <div class="lineprice"><span>￥<em>5999</em></span>起</div>
                                </div>
                            </li>
                        </a>
                        <div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
                        <!--li项目end-->
                        <!--li项目-->
                        <a href="#">
                            <li class="view-cell clearfix">
                                <div class="fl line-itemL">
                                    <div class="line-itemimg">
                                        <img src="../images/dingdan_img_1.png" />
                                        <p>上海出发</p>
                                    </div>
                                </div>
                                <div class="fl line-itemR">
                                    <h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
                                    <p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
                                    <div class="lineprice"><span>￥<em>5999</em></span>起</div>
                                </div>
                            </li>
                        </a>
                        <div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
                        <!--li项目end-->
                    </ul>
                </div>
            </div>
        </div>
        <!--下拉刷新容器end-->
    </div>
    <!--列表end-->
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
    var pageindex =0; //此处提供页的索引
    var canDown =1;   //此处提供数据，当有数据时，提供参数大于0的数，当没有数据时提供小于0的数
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    mui('body').on('tap','a',function(){document.location.href=this.href;});
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {
            var index=pageindex+1;
            mui.ajax({
                type: "post",
                url: "take.ajaxtake.html",
                data: 'p='+index,
                dataType: "json",
                timeout: 1000,
                complete :function(){
                },
                success: function(data){
                    canDown=data.surplus;
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((canDown<0));//参数为true代表没有更多数据了。
                    pageindex++;
                    var table = document.body.querySelector('.table-view');
                    var cells = document.body.querySelectorAll('.view-cell');
                    var str="";
                    for(var i=0;i<data.datas.length;i++){
                        var li = document.createElement('li');
                        li.className = 'bg-white';
                        str= '<a href="#"><li class="view-cell clearfix">'+
                                '<div class="fl line-itemL">'+
                                    ' <div class="line-itemimg">'+
                                    ' <img src="../images/dingdan_img_1.png" />'+
                                    ' <p>上海出发</p>'+
                                    '</div>'+
                                '</div>'+
                                '<div class="fl line-itemR">'+
                                    '<h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>'+
                                    '<p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>'+
                                    '<div class="lineprice"><span>￥<em>5999</em></span>起</div>'+
                                '</div>'+
                            '</li></a>'+
                        '<div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>';
                        li.innerHTML = str;
                        table.appendChild(li);
                    }
                },
                error: function() {
                    console.log("请求数据失败");
                }
            });

        }, 1500);
    }
    //以下是jquery代码
    $(function(){
        //选项卡
        $(".tab").find("span").click(function(){
            var _$this=$(this);
            var $w=_$this.width();
            var $index=_$this.index();
            $(".tab").find("span").removeClass("active");
            _$this.addClass("active");
            _$this.siblings(".line").animate({
                "left":$w*$index+"px"
            },200)
        });
        //取消收藏
        $ (".cancer-love").on("tap",function(){//此处用tap,触屏事件
            var btnArray = ['是', '否'];
            mui.confirm('确定取消收藏吗？', '取消收藏', btnArray, function(e) {
                if (e.index != 1) {
                    console.log("是")
                } else {
                    console.log("否")
                }
            });
        });
    })
</script>
</body>
</html>

欢迎star我的github

mui上拉刷新的更多相关文章

  1. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  2. mui上拉刷新+下拉加载

    具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  3. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

  4. mui 下拉刷新

    mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta chars ...

  5. mui 上拉加载更多的使用

    最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...

  6. mui 上拉加载 实现分页加载功能

    mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...

  7. mui 上拉加载

    最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css&qu ...

  8. SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新

    下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...

  9. 使用MJRefresh遇到的一个问题，上拉刷新后tableview瞬间滑到最底部

    最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...

随机推荐

  1. Golang--Directional Channel(定向通道)

    Directional Channel 通道可以是定向的(directional).在默认情况下,通道将以双向的(bidirectional)形式运作,用户既可以把值放人通道,也可以从通道取出值;但是 ...

  2. 并发编程（Process对象的join方法）(

    一. Process对象的join方法 在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情况 情况一:在主进程的任务与子进程的任务彼此独立的情况下 ...

  3. 5. Linux文件目录管理和打包压缩与搜索命令

    1.touch:用于创建空白文件或设置文件的时间 举例:使用ls 命令查看一个文件的修改时间,然后修改这个文件,最后再通过touch命令把修改后的文件时间设置成修改之前的时间(很多黑客就是这样做的): ...

  4. Linux数据库的导入导出

    Linux数据库的导入导出 1.导入数据库 mysql -u username -p test < /home/data/test.sql 说明:username是数据库用户名,test为目标数 ...

  5. python工业互联网应用实战5—Django Admin 编辑界面和操作

    1.1. 编辑界面 默认任务的编辑界面,对于model属性包含"choices"会自动显示下来列表供选择,"datetime"数据类型也默认提供时间选择组件,如 ...

  6. 一周精彩内容分享（第 1 期）："世纪逼空大战"

    这里记录过去一周,我看到的值得分享的东西. 一方面是整理记录一下自己一周的学习,另一方面也是期待自己有更多的输出,有更多的价值. 周刊开源(Github:wmyskxz/weekly),欢迎提交 is ...

  7. codeforces#244（div.2） C

    动漫节一游回来之后一直处于一种意识模糊的状态 看到大家都陆陆续续地过了C心里还是有点着急(自己没思路啊囧) 其实当时就在想该如何找到DFS中的一个环,然后再找到环路上最小的一个值 把所有环路上最小的值 ...

  8. Educational Codeforces Round 85 (Rated for Div. 2)

    \(Educational\ Codeforces\ Round\ 85\ (Rated\ for\ Div.2)\) \(A. Level Statistics\) 每天都可能会有人玩游戏,同时一部 ...

  9. C - Last Digit

    Description The function f(n, k) is defined by f(n, k) = 1k + 2k + 3k +...+ nk. If you know the valu ...

  10. A - Promotions

    题目详见http://7xjob4.com1.z0.glb.clouddn.com/3f644de6844d64706eb36baa3a0c27b0 这题是普通的拓扑排序,要把每一层的都保存下来. # ...