<!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. 洛谷P4981

    Description 给定 n 个点,组成一棵树,有多少种组合方法: Analysis 首先,结合题目简化意义和这句话 最多可能存在多少种父子关系 我们可以知道当且仅当有至少一个节点的儿子不同时称他 ...

  2. Elasticsearch如何保证数据不丢失？

    目录 如何保证数据写入过程中不丢 直接落盘的 translog 为什么不怕降低写入吞吐量? 如何保证已写数据在集群中不丢 in-memory buffer 总结 LSM Tree的详细介绍 参考资料 ...

  3. Java——对象和类

    对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象行为和状态. Java中的对象 对象具有状态和行为.对象的状态就是属性,行为通过方法体现. 在开发中,方法操作对象内部状态的改变,对象的相 ...

  4. Hive 使用总结

    1 带分区列的表更改列类型 常见的一个场景是Hive里面一个带分区的表,原来是int类型的字段,后来发现数据超过了int的最大值,要改成bigint.或者是bigint要改string或decimal ...

  5. 浅聊TCP的三次握手和四次挥手

    三次握手: 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连 ...

  6. PHP-电脑搭建服务器

    PHP-电脑搭建服务器 一 材料 花生壳   php   mysql    apache(我使用的是phpstudy) 二 实现 (一)phpstudy安装 (二)花生壳安装及认证 (二)相关设置 1 ...

  7. springboot基础配置-->Properties配置

    Spring Boot项目中的application.properties配置文件一共可以出现在如下4个位置: 项目根目录下的config文件夹中. 项目根目录下. classpath下的config ...

  8. java类里的成员变量是自身的对象问题

    今晚看单例模式饿汉时想到一个问题:假如java类里的成员变量是自身的对象,则新建该类对象时内存中怎么分配空间,我感觉似乎死循环了.于是上网搜索了下,哈哈,果然有人早就思考过这个问题了,站在巨人的肩膀上 ...

  9. NodeMCU学习笔记

    NodeMCU学习笔记 引脚连通 引脚 连通 D3 FLASH按键 D0 模组上的LED D4 芯片的LED FLASH按键 D3引脚已经与开发板上的FLASH按键开关连接 我们可以通过NodeMCU ...

  10. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...