<!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. 通过脚本本地下载Jar包

    通过脚本本地下载Jar包 1.脚本 2.pom.xml 1.脚本 download.bat # !/bin/bash mvn -f pom.xml dependency:copy-dependenci ...

  2. Linux 调整系统时间偏差

    在使用Linux系统部署项目,有时会出现时间跟当前时间不一致的情况,这个时候需要做些调整: 1.首先删除之前设置的时区 rm -rf /etc/localtime 2.创建上海时区 ln -s /us ...

  3. H3C交换机DHCP配置

    1.dhcp配置 dhcp enable:开启dhcp功能 dhcp server forbidden-ip 10.1.130.2 10.1.130.10----排除dhcp的一些地址 dhcp se ...

  4. 飞塔5.4和5.6版本IPSec互备冗余测试

    主电信.备联通:测试方法:修改诚盈的IPSec,将阶段一电信的对端地址改为错误的. 方法一: 通过静态路由的管理距离:电信设置为10:联通为15.经测试,可以实现自动切换,且电信恢复后 可以切换回电信 ...

  5. 既有Nginx重新动态编译增加http2.0模块

    1.HTTP2.0 HTTP2.0相较于http1.x,大幅度的提升了web性能,在与http1.1完全语义兼容的基础上,进一步减少了网络延时.我们现在很多对外的网站都采用https,但是F12一下看 ...

  6. Codeforces Round #626 (Div. 2) E. Instant Noodles（二分图，最大公因数）

    题意: 给你一个二分图,求左侧端点的所有可能子集中的点相连的右侧端点的权值的和的最大公因数. 题解: 若所有右侧端点均不在同一左侧子集中,则求所有权值的最大公因数即可 . 否则,将在相同左侧子集中的右 ...

  7. P1439 【模板】最长公共子序列（DP）

    题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...

  8. Network of Schools POJ - 1236 有向强连通图

    //题意://给你n个学校,其中每一个学校都和一些其他学校有交流,但是这些边都是单向的.你至少需要给几个学校//传递消息可以使全部学校都收到消息,第二问你最少添加几条边可以使它变成一个强连通图//题解 ...

  9. Codeforces Round #531 (Div. 3) C. Doors Breaking and Repairing (博弈)

    题意:有\(n\)扇门,你每次可以攻击某个门,使其hp减少\(x\)(\(\le 0\)后就不可修复了),之后警察会修复某个门,使其hp增加\(y\),问你最多可以破坏多少扇门? 题解:首先如果\(x ...

  10. EFCore学习记录--数据访问技术人门

    1.安装Microsoft.EntityFrameworkCore.Sqlite.Microsoft.EntityFrameworkCore.Tools包2.创建模型 数据库上下文模型:Bloggin ...