关于mui的下拉刷新的引用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于mui的下拉刷新的引用相关的知识,希望对你有一定的参考价值。

```javascri[t
mui.init({
pullRefresh: {
container: "#refreshContainer",//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up: {
auto: true,//可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: ‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});

    function pulldownRefresh() {
    var flag = false;
    mui.getJSON("/StoreMobile/StoreMember/get_member_data", {
        start: $("#viplistUl li").length,
        count: 20,
        member: 2,
        search: $("#seainput").val()
    }, function (resp) {
        if (resp.code==1) {
            LoadPage(resp.data);
        } else {
            if ($("#viplistUl").children().last().text() == "没有更多数据了") {
                return
            }
            $("#viplistUl").append("<li style=‘text-align: center‘>没有更多数据了</li>");
        }

    });
    this.endPullupToRefresh(flag);
}
    function LoadPage(data) {

    data.forEach(function (ele, index) {

        var listText = ‘<li onclick="member_detail(‘ + ele.member_id + ‘)" class="mui-table-view-cell mui-media"  data-mid="‘ + ele.member_id + ‘">\ ‘ +
            ‘<div>\ ‘ +
            ‘<img class="mui-media-object mui-pull-left" alt=" " src="‘ + ele.head_image + ‘">\ ‘ +
            ‘<div class="mui-media-body">‘ + ele.truename + ‘ <p class="mui-ellipsis">‘ + ele.login_account + ‘</p> </div> </div> </li>‘;
        viplistUl.append(listText);

    });
    band();
}

function InnerPage(data) {
    var listText = "";
    data.forEach(function (ele, index) {

        listText += ‘<li class="mui-table-view-cell mui-media" id="vip-click" data-mid="‘ + ele.member_id + ‘">\ ‘ +
            ‘<a href="javascript:;">\ ‘ +
            ‘<img class="mui-media-object mui-pull-left" alt=" " src="‘ + ele.head_image + ‘">\ ‘ +
            ‘<div class="mui-media-body">‘ + ele.truename + ‘ <p class="mui-ellipsis">‘ + ele.login_account + ‘</p> </div> </a> </li>‘;
    })
    viplistUl.html(listText);
    band();
}

function band() {
    mui(‘#viplistUl‘).on(‘tap‘, "li", function () {
        _id = $(this).data("mid");
        window.location.href = "vip_list_xq.html?" + _id
    })
}

以上可以去mui官网进行寻找

```php
// 获取会员的信息,下拉加载
    function get_member_data()
    {
        $member_data = I("get.");
        $store_id = $_SESSION["admin"]["store_id"];
        $member = $member_data["member"];
        $count = $member_data["count"];
        $start = $member_data["start"];
        $map["store_id"] = $store_id;
        $map["is_member"] = $member;
        $map["is_disabled"] = 1;
        if ($member_data["search"]) {
            $map["login_account|truename"] = array("like", "%" . $member_data["search"] . "%");
        }
        // 查找对应的会员
        $memberInfo = M("member")->where($map)->limit($start, $count)->order("register_time desc")->field("member_id, login_account,head_image,sex,truename")->select();
        if ($memberInfo) {
            $this->successMsg("获取成功", 1, $memberInfo);
        } else {
            $this->errorMsg("获取失败", 0);
        }
    }
以上可以获取到对应路由的信息

如果发现手机端划不动可以在html中加上

* {
        touch-action: pan-y;
}

.mui-scroll {
        position: relative;
}

以上是关于关于mui的下拉刷新的引用的主要内容,如果未能解决你的问题,请参考以下文章

关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题

mui点击加载,下拉刷新,上下整合代码

mui的下拉刷新和上拉加载

mui-下拉刷新结束

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

为啥使用mui的上拉刷新下拉加载后在电脑上的刷新加载正常手机上就不正常了