<!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. Java并发包源码学习系列：阻塞队列实现之DelayQueue源码解析

    目录 DelayQueue概述 类图及重要字段 Delayed接口 Delayed元素案例 构造器 put take first = null 有什么用 总结 参考阅读 系列传送门: Java并发包源 ...

  2. vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  3. HBase的Write Ahead Log (WAL)

    HBase的Write Ahead Log (WAL) 一.预写日志WAL(Write-Ahead-Log) HLog HLogKey LogFlusher LogRoller Replay 问题 二 ...

  4. 子网划分、变长子网掩码和TCP/IP排错__散知识点

    1.IP零子网(ip subnet-zero):这个命令可以允许你在自己的网络设计中使用第一个和最后一个子网.例如,C类掩码192通常只可以提供子网64和128,但在使用了ip subnet-zero ...

  5. Web APP和原生 APP的不同

    我们现在手机中的APP,大部分都是混合APP,也就是既用到了原生APP的基础,又用到了Web APP的基础,混合的比例从0%到100%之间不等.更好的了解APP的类型,有助于我们学则合适的测试策略.今 ...

  6. SQL(replace)替换字段中指定的字符

    语法:update 表名 set 字段名=REPLACE(字段名,'修改前的字符','修改后的字符') 例 Product商品表中Name 名字字段中描述中将'AAA' 修改成 'BBB' SQL语句 ...

  7. A - The Suspects （sars传染）

    题意:有m组,0为起点,有0的那一组全是嫌疑人,之后会不断传递到其它组去,问一共有多少人是嫌疑人. Severe acute respiratory syndrome (SARS), an atypi ...

  8. 2019 ICPC 上海区域赛总结

    2019上海区域赛现场赛总结 补题情况(以下通过率为牛客提交): 题号 标题 已通过代码 通过率 我的状态 A Mr. Panda and Dominoes 点击查看 5/29 未通过 B Prefi ...

  9. 2019牛客暑期多校训练营（第二场）E.MAZE(线段树+dp)

    题意:给你一个n*m的矩阵 你只能向左向右相下走 有两种操作 q次询问 一种是把一个单位翻转(即可走变为不可走 不可走变为可走) 另一种是询问从(1,x) 走到 (n,y)有多少种方案 思路:题目n为 ...

  10. AcWing 243. 一个简单的整数问题2 (树状数组,区间更新/询问)

    题意:区间更新,区间询问. 题解;对于区间更新,我们还是用差分数组\(b_i\)来更新,区间询问时,我们的答案是:\(\sum_{i=l}^{r}\sum_{j=1}^{i}b_j\), 所以,我们搞 ...