mui上拉加载插件+Vue

来源：互联网发布：网络鲜花店上海编辑：程序博客网时间：2024/06/10 15:43
由于比较简单，所以直接上代码，所有文件已经打包好。下载地址：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>
阅读全文
0 0