解决MUI 下拉刷新页面,拉动不了的问题 ,主要看这里 mui-scroll-wrapper

<!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-scalable=no" />
    <link href="../../css/common/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../css/common/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../css/local/personal-center.css" />
    <link href="../../css/myself/index.css" rel="stylesheet" />

</head>
<body>
    <div class="mui-content " >

<!--主要看这里 把下拉刷新的id 放在 scroll 上 包含了你的页面标签内容-->
        <div class="mui-scroll-wrapper" id="pullrefresh">  
            <div class="mui-scroll" >  


                <div id="head-th">
                    <div class="head-th-td">
                        <div class="head-img">
                            <img class="headImg" id="headPortrait" src="../../images/txlog.png"/>
                        </div>
                        <div class="head-name">
                            <div class="user-name" id="username">
                                <!-- <span id="username">微信昵称</span> -->
                            </div>
                            <div class="user-vip"  id="card">
                                <!-- <span>会员类型</span> -->
                            </div>
                        </div>
                    </div>
                    <!--我的账户 消费券-->
                    <div id="head-money">
                        <div class="head-money-tl" id="ToMyaccount">
                            <div class="money-tl-top">
                                <span class="yen">¥</span><span class="wallets"></span>
                            </div>
                            <div class="money-tl-top">
                                <span>我的账户</span>
                            </div>
                        </div>
                        <div class="head-money-tr" id="ToVolume">
                            <div class="money-tl-top">
                                <span class="coupons">0</span>
                            </div>
                            <div class="money-tl-top">
                                <span>消费券</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--购买状态-->
                <div id="purchase">
                    <div class="list-item" οnclick="myorder('0')">
                        <img src="../../images/wddd.png" />
                        <div class="">
                            <span>我的订单</span>
                        </div>
                    </div>
                    <div class="list-item" οnclick="myorder('1')">
                        <img src="../../images/dfk.png" />
                        <div class=""> 
                            <span>待付款</span>
                        </div>
                    </div>
                    <div class="list-item" οnclick="myorder('2')">
                        <img src="../../images/dfh.png" />
                        <div class="">
                            <span>待发货</span>
                        </div>
                    </div>
                    <div class="list-item" οnclick="myorder('3')">
                        <img src="../../images/dsh.png" />
                        <div class="">
                            <span>待收货</span>
                        </div>
                    </div>
                </div>
                <!--<列表菜单>-->
                <div id="list-menu">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media ">
                            <a class="mui-navigate-right" id="ToManage">
                                <img class="mui-media-object mui-pull-left" src="../../images/ma-icon.png">
                                <div class="list-menu-span">
                                    <span>账号管理</span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media ">
                            <a class="mui-navigate-right" id="NextCertification">
                                <img class="mui-media-object mui-pull-left" src="../../images/rz.png">
                                <div class="list-menu-span">
                                    <span>实名认证</span>
                                    <span class="certification-details">未认证</span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media-3">
                            <a class="mui-navigate-right" id="NextMycollection">
                                <img class="mui-media-object mui-pull-left" src="../../images/sc.png">
                                <div class="list-menu-span">
                                    <span>我的收藏</span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-media-2">
                            <a class="mui-navigate-right" id="shareCore">
                                <img class="mui-media-object mui-pull-left" src="../../images/shareCore.png">
                                <div class="list-menu-span">
                                    <span>分享中心</span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media ">
                            <a class="mui-navigate-right" id="NextSetting">
                                <img class="mui-media-object mui-pull-left" src="../../images/sz.png">
                                <div class="list-menu-span">
                                    <span>系统设置</span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media ">
                            <a class="mui-navigate-right" id="helpCenter">
                                <img class="mui-media-object mui-pull-left" src="../../images/helpCore.png">
                                <div class="list-menu-span">
                                    <span>帮助中心</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div style="height: 70px;"></div>
            </div>  
        </div>
    </div>
    <nav class="mui-bar mui-bar-tab" id="nav">
        <a class="mui-tab-item mui-active" id="home">
            <span class="mui-icon"><img class="navicon a1" src="../../images/navicon/home0.png"></span>
            <span class="mui-tab-label">&nbsp;首页</span>
        </a>
        <a class="mui-tab-item" id="MallHomePage">
            <span class="mui-icon"><img class="navicon a2" src="../../images/navicon/mall0.png"></span>
            <span class="mui-tab-label">&nbsp;商城</span>
        </a>
        <a class="mui-tab-item" id="QRcode">
            <div class="mui-icon-qr">
                <img class="qricon" src="../../images/code.png">
            </div>
        </a>
        <a class="mui-tab-item" id="info">
            <span class="mui-icon"><img class="navicon a3" src="../../images/navicon/info0.png"></span>
            <span class="mui-tab-label">&nbsp;消息</span>
        </a>
        <a class="mui-tab-item" id="per_cen">
            <span class="mui-icon"><img class="navicon a4" src="../../images/navicon/personal1.png"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </nav>
    <script src="../../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script type="text/javascript">

//js 下拉刷新操作

        mui.init({
            pullRefresh : {
                container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
                down : {
                  style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
                  // color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
                  // height:'50px',//可选,默认50px.下拉刷新控件的高度,
                  // range:'100px', //可选 默认100px,控件可下拉拖拽的范围
                  // offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
                  auto: true,//可选,默认false.首次加载自动上拉刷新一次
                  callback :pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
              }
            }
        });
        //初始化scroll控件
        // mui('.mui-scroll-wrapper').scroll({
        //     deceleration: 0.0005 
        // });

//执行需要刷新获取数据的方法

        function pulldownRefresh() {
            setTimeout(function () {
                userinfo();//实现更新页面的操作
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }, 1500);
        }
        var isReload = window.localStorage;
        userinfo();
        var real = '0';
        // if(localStorage.getItem("token") != '' && localStorage.getItem("token") != 'null' && localStorage.getItem("token") != null){
            function userinfo(){
                _get('member/index','').then(function(res){
                    let username = res.user.username != '' ?  res.user.username:res.user.phone;
                    let card = res.user.card == '0' ? '注册会员' : '乐购会员';
                    $("#username").text(username);
                    $("#card").text(card);
                    sum = Number(res.user.balance)+Number(res.user.subsidy);
                    $(".wallets").text(''+sum.toFixed(2));
                    $(".coupons").text(res.user.coupon);
                    if(res.user.real == '1'){
                        $(".certification-details").text('已认证');
                        real = '1';
                    }
                    if(res.user.url != null){    
                        if(res.user.url.indexOf('http') != '-1'){
                            $("#headPortrait").attr('src',res.user.url);
                        }else{
                            $("#headPortrait").attr('src',AppApi+res.user.url);
                        }                    
                    }
                })
            }
        // }
        _get('index/member_bg',{pid:'6667'}).then(function(res){
            $("#head-th").css({"background-image":"url("+AppApi+res.img.adv_image+")"});
        })
    //首页
    document.getElementById("home").addEventListener('tap', function() {
        mui.openWindow({
            url: "../index/index.html",
            id: "../index/index.html",
            waiting:{autoShow:false,}
        });
    });
    //消息
    document.getElementById("info").addEventListener('tap', function() {
        mui.openWindow({
            url: "../News/news.html",
            id: "../News/news.html",
            waiting:{autoShow:false,}
        });
    });
    //个人中心
    document.getElementById("per_cen").addEventListener('tap', function() {
        mui.openWindow({
            url: "../PersonalCenter/index.html",
            id: "../PersonalCenter/index.html"
        });
    });
    //跳转至商城主页
    document.getElementById("MallHomePage").addEventListener('tap', function() {
        mui.openWindow({
            url: "../TescoMall/index.html",
            id: "../TescoMall/index.html"
        });
    });
    //跳转至二维码扫描
    mui.plusReady(function(){
        document.querySelector('#QRcode').addEventListener('click',function(){
            var w = plus.webview.create('../index/scan_code.html', 'carcode', {
            });
            plus.webview.show(w, 'slide-in-right', '300ms');
        },false);
    });
    //初始化scroll控件
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 
    });
    function myorder(act){
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        localStorage.setItem('active_act',act);
        mui.openWindow({
            url: "../Myorder/my-order.html?act="+act,
            id: "../Myorder/my-order.html?act="+act,
        });
    }
    mui('body').on('tap','.list-item',function(e){
        // document.location.href=this.href;
        this.click();
    });
    //跳转至我的帐户
    document.getElementById('ToMyaccount').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        mui.openWindow({
            url: '../PersonalCenter/myaccount.html',
            id: '../PersonalCenter/myaccount.html'
        });
    });
    var cert = '';
    _get('member/real_detailed','').then(function(res){
        if(res.data){
            if(res.data.status == '0'){
                cert = '0'
            }
        }
    })
    //点击实名认证跳转到认证页
    document.getElementById('NextCertification').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        if(cert == '0'){
            mui.openWindow({
                url: '../Account-manage/certification.html',
                id: '../Account-manage/certification.html'
            });
        }
        if(real == '0'){
            mui.openWindow({
                url: '../Account-manage/identification.html',
                id: '../Account-manage/identification.html'
            });
        }
        if(real == '1'){
            mui.openWindow({
                url: '../Account-manage/certification.html',
                id: '../Account-manage/certification.html'
            });
        }
    });
    //跳转至系统设置
    document.getElementById('NextSetting').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        mui.openWindow({
            url: '../PersonalCenter/setting.html',
            id: '../PersonalCenter/setting.html'
        });
    });
    //跳转至我的收藏
    document.getElementById('NextMycollection').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        mui.openWindow({
            url: '../PersonalCenter/my-collection.html',
            id: '../PersonalCenter/my-collection.html'
        });
    });
    //跳转至账号管理
    document.getElementById('ToManage').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        mui.openWindow({
            url: '../Account-manage/manage-home.html',
            id: '../Account-manage/manage-home.html'
        });
    });
    //跳转至消费券
    document.getElementById('ToVolume').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}

        mui.openWindow({
            url: '../Bringforward/consumption-volume.html',
            id: '../Bringforward/consumption-volume.html'
        });
    });
    //跳转至帮助中心
    document.getElementById('helpCenter').addEventListener('tap', function() {
        mui.openWindow({
            url: '../questionsHelpFeedback/helpHomePage.html',
            id: '../questionsHelpFeedback/helpHomePage.html'
        });
    });
    //跳转至分享中心
    document.getElementById('shareCore').addEventListener('tap', function() {
        //验证是否登录
        checkLogin();
        var user = localStorage.getItem('user_info');
        if(!user || user == null || user == ''){return false;}
        
        mui.openWindow({
            url: '../PersonalCenter/shareCore.html',
            id: '../PersonalCenter/shareCore.html'
        });
    });
</script>
</body>
</html>

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

Chen_2017_Strive

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值