关于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;
}

原文地址:https://blog.51cto.com/14263015/2427201

时间: 2024-10-11 13:32:27

关于mui的下拉刷新的引用的相关文章

mui的下拉刷新和上拉加载

代码定义: var refresh = function(){ mui.init({ pullRefresh : { container:'#refreshContainer',//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id..class等 down : { height:50,//可选,默认50.触发下拉刷新拖动距离, auto: false,//可选,默认false.自动下拉刷新一次 contentdown : "下拉可以刷新",//可选,在下

MUI 实现下拉刷新上拉加载的简单例子

话不多说,直接上代码与效果图吧. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sc

mui 修改下拉刷新提示文字的显示位置

第一种: .mui-bar-nav~.mui-content .mui-pull-top-pocket { top: 126px !important; } 第二种: .mui-pull-top-pocket { top: 126px !important; } 实测两种方式都可以解决问题. 原文地址:https://www.cnblogs.com/muou2125/p/10740433.html

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

MUI实现上拉刷新和下拉加载

  前  言 ha ha 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况): mui通过双webview解决这个DIV的拖动流畅度问题:拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画. mui的上拉加载和下拉刷新类似,都属于pullRefresh插件. 上拉刷新 主页面内容比较简单,只需要创建子页面即可: mui.init({ subpages:[{ u

mui 单页面下拉刷新

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <

使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。

套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现上拉刷新,下拉加载的功呢? 首先需要一个容器: 1 <!--下拉刷新容器--> 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> 3 <di

MUI 选项卡切换+下拉刷新动态 完整实现一例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <

关于mui 中popover与下拉刷新冲突问题

最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了,这东西其实不难,但是当它与另一个东西冲突时就不好整了.这不popover和下拉刷新搞上了,害我百度了半天,各种webview整半天都没效果(估计是应为我没整懂,先解决问题 以后在慢慢研究).整了一个晚上想到一个笨办法,但是可以先用:就是监听popover的状态,然后对下拉做禁用和开启操作,代码如下