<!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. MySql（四）SQL注入

    MySql(四)SQL注入 一.SQL注入简介 1.1 SQL注入流程 1.2 SQL注入的产生过程 1.2.1 构造动态字符串 转义字符处理不当 类型处理不当 查询语句组装不当 错误处理不当 多个提 ...

  2. 将Oracle数据，以及表结构如何传输至MySQL

    最近研究数据库,将Oracle数据库中的表结构以及数据传输给MySQL数据库,自己通过学习采用两种方式,效率较高. 方式一:Navicat 自从下载了Navicat,真的发现这是一款操作数据库十分优秀 ...

  3. Java 跨域 Json字符转类对象

    前言 解析json 测试类 测试结果 前言 对于从其他服务器的url获得数据,我们一般都为json数据传输,比如服务器B要从服务器A的url获得分页信息,得到json字符后如果可以方便快捷操作要转为自 ...

  4. java正则表示判断。是否以某个关键字结尾的

    String defaultPageSqlId = ".*ByPaging$"; System.out.println("dsdsdsdByPaging".ma ...

  5. linux（10）linux vi/vim

    前言 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是vim编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的 ...

  6. 1. Machine Learning - Introduction

    Speaker: Andrew Ng   1. Introduction 1.A comptuter program is said to learn from experience E with r ...

  7. Codeforces Global Round 9 E. Inversion SwapSort

    题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...

  8. hdu3565 Bi-peak Number (有上界和下界的数位dp)

    Problem Description A peak number is defined as continuous digits {D0, D1 - Dn-1} (D0 > 0 and n & ...

  9. Codeforces Round #631 div1C(或者div2E) Drazil Likes Heap 题解

    题目链接:https://codeforces.com/contest/1329/problem/C 或者:https://codeforces.com/contest/1330/problem/E ...

  10. L2-013 红色警报 (25分) 并查集复杂度

    代码: 1 /* 2 这道题也是简单并查集,并查集复杂度: 3 空间复杂度为O(N),建立一个集合的时间复杂度为O(1),N次合并M查找的时间复杂度为O(M Alpha(N)), 4 这里Alpha是 ...