YYangBBB 2019-08-07 16:24 采纳率: 0%
浏览 974

MUI 上拉加载 始终显示在页面顶部

稍微往上一拉就会触发
贴代码,显示效果,求解
图片说明


    <body style="height: 100%;">  
        <script src="../js/mui.js"></script>  
        <script type="text/javascript">  
            mui.init();  
        </script>  

        <!-- <header id="header" class="mui-bar mui-bar-nav navbar">  
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-left mui-action-back" id="cancelbtn">返回</button>  
            <h1 class="mui-title navtitle">备件领退用记录</h1>  
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="savebtn">申请</button>  
        </header> -->  

        <div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="">  
            <div class="mui-scroll" id="scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 50px;">  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <div class="mui-card">  
                            <div class="mui-card-header">  
                                <span style="display: block;">WX-20190801-000028</span>  
                                <button class="orderState" style="background:rgb(92,184,92);">退用</button>  
                            </div>  
                            <div class="mui-card-content">  
                                <div class="mui-card-content-inner">  
                                    <div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
                                    <div class="orderDate">  
                                        <img src="../images/people.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用人:管理员</div>  
                                    </div>  
                                    <div class="orderDate">  
                                        <img src="../images/shijian.png" class="orderDateImg">  
                                        <div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </li>  
                </ul>  
            </div>  
        </div>  

        <script>  
            //公共变量  
            var fromsource = '维修';  
            var eqfiDevicename = '';  
            var eqfiDepartmentnum = '';  
            var maliId = '';  
        </script>  

        <script>  
            mui.init({  
                pullRefresh: {  
                    container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                    down: {  
                        style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式  
                        color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色  
                        height: '50px', //可选,默认50px.下拉刷新控件的高度,  
                        range: '100px', //可选 默认100px,控件可下拉拖拽的范围  
                        offset: '0px', //可选 默认0px,下拉刷新控件的起始位置  
                        auto: false, //可选,默认false.首次加载自动上拉刷新一次  
                        callback: function() {  

                        }  
                    },  
                    up: {  
                        height: 50,  
                        auto: false,  
                        contentrefresh: '正在加载...',  
                        contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;                          
                        callback: function() {  
                            console.log($('#refreshContainer').css('height'));  
                            console.log($('#scroll').css('height'));  
                        }  
                    }  
                }  
            });  
        </script>  
    </body>  

</html>  

  • 写回答

2条回答 默认 最新

  • YYangBBB 2019-08-08 08:36
    关注

    在线等答案~~~~~

    评论

报告相同问题?

悬赏问题

  • ¥15 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝