mui上拉加载插件+Vue

最新推荐文章于 2024-06-18 16:48:36 发布
爪哇挖掘人
最新推荐文章于 2024-06-18 16:48:36 发布
阅读量3k
点赞数
分类专栏： Javascript 文章标签： vue+mui上拉加
本文链接：https://blog.csdn.net/u010981786/article/details/74945172
版权
Javascript 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
由于比较简单，所以直接上代码，所有文件已经打包好。下载地址：http://download.csdn.net/detail/u010981786/9895062
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>mui上拉加载插件与Vue结合开发示例</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="mui.min.css"/>
        <link rel="stylesheet" href="customs.css" />
        <link rel="stylesheet" href="home.css" />
    </head>
    <script>
    window.onload = function(){
        var fontSize = 100;
        var elm = document.documentElement;
        elm.style.fontSize = fontSize * (elm.clientWidth / 375) + 'px';
        var h=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
        var objh = h - 0.5;
        var Ft = fontSize * (elm.clientWidth / 375);
        var conh = (parseInt(objh)/Ft).toFixed(2);
        $(".mui-control-content").css("height",conh + "rem");
    };
    </script>
    <style type="text/css">
        body,html{background-color: #f0f0f0;}
        .mui-control-content { height: 4rem;background-color: #f0f0f0; }
        .mui-segmented-control{background: #fff;}
    </style>

    <body>
    <div id="atApp">
        <div class="mui-content">
            <div class="booking mui-slider mui-fullscreen">
                <div class="mui-control-content mui-active">                    
                    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary borderBu">
                        <a class="mui-control-item isBorderR mui-active" href="#item1">诊所</a>
                        <a class="mui-control-item isBorderR" href="#item2">医生</a>
                    </div>
                    <div class="mui-slider-group">
                    <div id="item1" class=" mui-control-content mui-active">
                        <div  class="mui-scroll-wrapper" >
                            <div class="mui-scroll" lable='true'>
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell at_orderli"  v-for="item in clinicList.data">
                                    <div class="mui-navigate-right at_order">
                                        <div class="at_clinicname at_left">{{item.clinicName}}</div>
                                        <div class="at_ordernum at_right">{{item.orderCounts}}笔订单</div>
                                    </div>
                                </li>                          
                            </ul>
                            </div>
                        </div>
                    </div>  
                    <div id="item2" class=" mui-control-content">
                        <div class="mui-scroll-wrapper " data-scroll="1" style="overflow: scroll;">
                            <div class="mui-scroll" >
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell at_orderli" v-for="item in doctorList.data">
                                    <div class="mui-navigate-right at_order">
                                        <div class="at_clinicname at_left">{{item.doctorName}}</div>
                                        <div class="at_ordernum at_right">{{item.orderCounts}}笔订单</div>
                                    </div>
                                </li>                                               
                            </ul>
                            </div>
                        </div>
                    </div>  
                    </div>                                                      
                </div>              
            </div>
        </div>
        </div>
    </body>         
        <script src="mui.min.js"></script>
        <script src="vue.js"></script>
        <script src="vue-resource.min.js"></script>
        <script src="jquery-3.1.0.min.js"></script>
        <script src="mui.pullToRefresh.js"></script>
        <script src="mui.pullToRefresh.material.js"></script>
        <script type="text/javascript">

        var mainScope = new Vue({
            el: '#atApp',
            data : {
                clinicList:{data:[],pageNo:1,unreads:0},
                doctorList:{data:[],pageNo:1,unreads:0},
                beginDate: '2017/07/01',
                endDate : '2017/07/01'
            },
            methods:{
                /**
                 * 初始化Vue  page
                 */
                initVuePage:function(){
                    //绑定上拉加载
                    $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                        mui(pullRefreshEl).pullToRefresh({
                            up: {
                                callback: function() {
                                    var self = this;
                                    mainScope.loadMore({'self':self});
                                },
                                offset: 20,
                                contentinit: '<p style="text-align: center;">上拉显示更多</p>',
                                contentdown: '<p style="text-align: center;">上拉显示更多</p>',
                                contentrefresh: '<p style="text-align: center;">正在加载...</p>',
                                contentnomore:'<p style="text-align: center;">没有更多数据了</p>',
                                auto:true//第一次加载自动上拉一次
                            }
                        });
                    });
                },
                loadMore:function(data){
                    if($(data.self.element).attr('lable')){
                        mainScope.queryClinics(data);
                    }else{
                        mainScope.queryDoctors(data);
                    }
                },
                queryDoctors:function(data){
                    var records = 5;
                    //参数校验
                    Vue.http({
                        url:"data.txt",
                        method:'GET',
                        params:{
                            userID:85547640210818,
                            queryType:"1",
                            clinicID:50003,
                            'pageNO': mainScope.doctorList.pageNo,
                            'records': records                              
                        }

                    }).then(function(msg){
                        if(msg.body.code == '000000'){
                            mainScope.doctorList.data = mainScope.doctorList.data.concat(msg.body.data.queryList.data);
                            //mainScope.doctorList.unreads = msg.body.data.doctorNew;
                            mainScope.doctorList.pageNo++;
                            if(msg.body.data.queryList.recordsTotal <= mainScope.doctorList.pageNo * records){
                                data.self.endPullUpToRefresh(true);
                            }else{
                                data.self.endPullUpToRefresh();
                            }
                        }else {
                            console.log(msg.body.codeDesc)
                        }
                    });
                },
                queryClinics:function(data){
                    var records = 5;
                    //参数校验
                    Vue.http({
                        url:"data.txt",
                        method:'GET',
                        params:{
                            userID:85547640210818,
                            queryType:"1",
                            clinicID:50003,
                            'pageNO': mainScope.clinicList.pageNo,
                            'records' :records                          
                        }
                    }).then(function(msg){
                        if(msg.body.code == '000000'){
                            mainScope.clinicList.data = mainScope.clinicList.data.concat(msg.body.data.queryList.data);
                            mainScope.clinicList.unreads = msg.body.data.clinicNew;
                            mainScope.clinicList.pageNo++;
                            if(msg.body.data.queryList.recordsTotal <= mainScope.clinicList.pageNo * records){
                                data.self.endPullUpToRefresh(true);
                            }else{
                                data.self.endPullUpToRefresh();
                            }
                        }else {
                            console.log(msg.body.codeDesc)
                        }
                    });
                }
            }
        });
        mainScope.initVuePage();
        </script>
</html>