w***@163.com
w***@163.com
  • 发布:2017-04-20 19:21
  • 更新:2017-04-20 22:47
  • 阅读:1414

上拉刷新 点击标签 滚动到顶部

分类:MUI

如图中的代码块,怎样操作才能让页面的滚动条滚动到顶部?

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>账单管理</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../../../css/mui.min.css">   

    </head>  

    <body>   
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">  
                账单管理  
            </h1>  
            <button id="btn_search_content" class="btn-header-right">筛选</button>  
        </header>  
        <div class="mui-content">  
            <div class="my-fangyuan">  
                <div class="my-search">  
                    <ul class="my-select">  
                        <li name="search_parent" id="communtiy_id" class="mui-ellipsis"><label>小区</label><span class="mui-icon mui-icon-arrowdown"></span></li>  
                        <li name="search_parent" id="building_id" class="mui-ellipsis"><label>楼栋</label><span class="mui-icon mui-icon-arrowdown"></span></li>  
                        <li name="search_parent" id="state" class="mui-ellipsis"><label>状态</label><span class="mui-icon mui-icon-arrowdown"></span></li>  
                    </ul>  
                    <div class="my-select-content">  
                        <ul name="search_child" id="communtiy_id_list" class="communtiy_id_list">  
                        </ul>  
                        <ul name="search_child" id="building_id_list" class="building_id_list">  
                        </ul>  
                        <ul name="search_child" id="state_list" class="state_list">  
                            <li data-stateKey=''>--请选择--</li>  
                            <li data-stateKey='firstnopay'>首期未付</li>  
                            <li data-stateKey='overdue'>已逾期</li>  
                            <li data-stateKey='nopay'>未支付</li>  
                            <li data-stateKey='alreadypay'>已支付</li>   
                        </ul>  
                    </div>  
                </div>  
                <div class="my-total-count4">  
                    <dl>  
                        <dt>{{countRecord.allcount}}</dt>  
                        <dd>全部</dd>  
                    </dl>   
                </div>  
            </div>  
            <!--下拉刷新容器-->  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-card">  
                                    <div class="mui-card-header">  
                                        账单编号:{{bill.ordercode}}  
                                    </div>  
                                    <div class="mui-card-content my-list-content">  
                                        <ul>  
                                            <li class="mui-table-view-cell my-table-col-2">  
                                                <span>账单类型</span>  
                                                <span>{{bill.order_type_str}}</span>  
                                            </li>                                          
                                        </ul>  
                                    </div>  
                                    <div class="mui-card-footer">   
                                    </div>  
                                 </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript" src="../../../js/jquery-1.11.3.js" ></script>  
    <script src="../../../js/mui.js"></script>   
    <script src="../../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>  
    <script>  
        mui.init();  
        //阻尼系数  
        var deceleration = mui.os.ios?0.003:0.0009;  
        mui('.mui-scroll-wrapper').scroll({  
            bounce: false,  
            indicators: true, //是否显示滚动条  
            deceleration:deceleration  
        });  
        mui.ready(function() {  
            //循环初始化所有下拉刷新,上拉加载。  
            mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                mui(pullRefreshEl).pullToRefresh({  
                    down: {  
                        callback: function() {  
                            var self = this;  
                            setTimeout(function() {  
                                page = 1;  
                                queryBills();  
                                self.endPullDownToRefresh();  
                            }, 1000);  
                        }  
                    },  
                    up: {  
                        callback: function() {  
                            var self = this;  
                            setTimeout(function() {  
                                ++page;  
                                queryBills();  
                                self.endPullUpToRefresh();  
                            }, 1000);  
                        }  
                    }  
                });  
            });   
        });  

        var communityid='',buildingid='',stateKey='',totalPage = 1,page=0,rows=5,isPage=false;  

        //记录查询的楼层,用作页面返回回调。  
        var checkliIndex = 0;  
        var contentVM;  
        window.onload = function(){  
            mui.plusReady(function(){  
                contentVM = new Vue({  
                    el: 'body',  
                    data: {   
                        countRecord: '',  
                        dPage:''  
                    }  
                });   
                page = 1;  
                queryBills();  
                //关闭等待框  
                plus.nativeUI.closeWaiting();  
                //显示当前页面  
                mui.currentWebview.show();  
            });  
            //FastClick.attach(document.body);  
        };   
        function queryBills(){  
            console.log("page:"+page);  
            if(page==1){  
                isPage = false;  
//              mui(".mui-slider-group .mui-scroll").scroll().refresh();  
                //mui(".mui-slider-group .mui-scroll").pullRefresh().scrollTo(0,0,500);  
            }else{  
                isPage = true;  
            }  
            var params = {};  
            params["userid"] = localStorage.getItem("userid");  
            params["communityid"]=communityid;   
            console.log(JSON.stringify(params));  
            params = aesEncrypt(JSON.stringify(params));  
            $.ajax({  
                type : "post",  
                url  : ipAddr+'/app/bill/getBills',   
                data:{  
                    params:params  
                },  
                success : function(data){  
                    if(data.code == 1){  
                        //把后台数据添加到前台  
                        if(page==1){  
                            contentVM.countRecord = data.countRecord;  
                        }  
                        contentVM.dPage = page==1 ? data.dPage : contentVM.dPage.concat(data.dPage);  
                        totalPage=data.totalPage;  
                    }  
                }  
            });  
        }   

        //小区查询点击事件  
        jQuery("#communtiy_id_list").on('tap', 'li', function(){   
            console.log("小区选中了");   
            //点击事件清空页面已有值  
            page=1;  
            totalPage = 1;  
            mui(".mui-slider-group .mui-scroll").pullToRefresh().down;  
//          mui(mui(".mui-slider-group .mui-scroll").pullToRefresh().pulldownRefresh().element.parentNode).scroll().refresh();  
            queryBills();  
            paraSelect(ipAddr+'/app/common/getBuildingList',{communityid:communityid!=''?communityid:'000'},'buildingid','buildingcode','building_id_list');  
        });   
    </script>  
</html>
2017-04-20 19:21 负责人:无 分享
已邀请:
z***@163.com

z***@163.com

scrollTo应该能实现,我看你代码里也有地方用过这个

  • w***@163.com (作者)

    不行,mui封装好的组件里边有保存上次的位置,scrollTo到顶部后,页面稍微滑动以下就会瞬间滚动到上次的位置……

    2017-04-21 09:16

51ZionLin

51ZionLin

我好像有写过了... 你找下我发过的帖子

  • w***@163.com (作者)

    谢谢,方法管用,问题解决了

    2017-04-21 10:30

该问题目前已经被锁定, 无法添加新回复