mui下拉刷新上拉加載

時間 2019-12-04

標籤 mui 下拉刷新加載简体版

原文原文鏈接

新外賣商家端主頁訂單大廳頁面javascript

使用mui雙webview,實現下拉刷新上拉加載css

主頁面：html

order_index.htmlvue

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>直播生活商家端-訂單大廳</title>
        <script src="../../js/flexible.js"></script>
        <script src="../../js/mui.min.js"></script>
        <link rel="stylesheet" href="../../fonts/iconfont.css" />
        <link rel="stylesheet" href="../../css/mui.min.css" />
        <link rel="stylesheet" href="../../css/init.css" />
        <link rel="stylesheet" type="text/css" href="../../css/gz_css.css" />

    </head>

    <body style="background-color: #f7f7f7">
        <header class="mui-bar mui-bar-nav gz_bar">
            <h1 class="mui-title">訂單大廳</h1>
        </header>

        <div class="mui-content gz_order_index">
            
        </div>
        <div class="gz_button_box_show"></div>

        <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/Vue.js"></script>
        <script src="../../js/common.js"></script>
        <script type="text/javascript">
            //啓用雙擊監聽
            mui.init({
                gestureConfig:{
                    doubletap:true
                },
                subpages:[{
                    url:'./order_index_sub.html',
                    id:'order_index_sub.html',
                    styles:{
                        top: '45px',
                        bottom: '0px',
                    }
                }]
            });
        
            var contentWebview = null;
            document.querySelector('header').addEventListener('doubletap',function () {
                if(contentWebview==null){
                    contentWebview = plus.webview.currentWebview().children()[0];
                }
                contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
            });
        </script>
        

    </body>

</html>

order_index_sub.htmljava

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>直播生活商家端-訂單大廳</title>
        <link rel="stylesheet" href="../../fonts/iconfont.css" />
        <link rel="stylesheet" href="../../css/mui.min.css" />
        <link rel="stylesheet" href="../../css/init.css" />
        <link rel="stylesheet" type="text/css" href="../../css/gz_css.css" />

    </head>
    <style>
        .btn-block {
            margin: 0 auto;
            width: 4rem;
            height: 1.5rem;
            text-align: center;
            position: relative;
            z-index: 99;
        }
        
        .gz_jiedan {
            display: inline-block;
        }
        
        .no-content {
            width: 2rem;
            height: 2rem;
        }
        
        .no-con-box {
            text-align: center;
            padding-top: 50%;
        }
        
        .no-con-box p {
            padding-top: 0.5rem;
        }
        
        .mui-content {
            background-color: #f7f7f7 !important;
        }
    </style>

    <body style="background-color: #f7f7f7">
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll gz_order_index" id="order_index">
                <!--數據列表-->
                <div class="gz_box">
                    <div v-show="!ishave">
                        <div class="no-con-box">
                            <img src="../../img/no_content.png" class="no-content" />
                            <p>暫無內容</p>
                        </div>
                    </div>
                    <div v-show="ishave">
                        <ul class="mui-table-view gz_order_ul">
                            <li class="mui-table-view-cell mui-media gz_order_li gz_xiangqing" v-for="(val,index) in order" :key="val.order_id">
                                <a href="javascript:;" class="gz_order_li_a">
                                    <div class="gz_order_top">
                                        <span class="gz_order_top_left">訂單號：<em>{{val.order_sn}}</em></span>
                                        <span class="gz_order_top_right">{{val.add_time}}</span>
                                    </div>
                                    <div class="gz_order_index_li_body">
                                        <div class="gz_order_body_1" :data-id="val.order_id">
                                            <h1><em>{{val.order_id}} {{val.consignee}}</em>{{val.mobile}}</h1>
                                        </div>
                                        <div class="gz_order_body_2" :data-id="val.order_id">
                                            <ul>
                                                <li v-for="val2 in val.goods_list">
                                                    <h3>{{val2.goods_name}}</h3>
                                                    <h4>x{{val2.goods_num}}</h4>
                                                    <h5>￥{{val2.goods_price}}</h5>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="gz_order_body_3">
                                            <div class="btn-block" :data-order_id="val.order_id">
                                                <button type="button" class="mui-btn mui-btn-block mui-btn-primary gz_jiedan">接單</button>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="gz_button_box_show"></div>
        <script src="../../js/flexible.js"></script>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/Vue.js"></script>
        <script src="../../js/common.js"></script>
        <script>
            //下拉刷新
            mui.init({
                pullRefresh: {
                    container: "#pullrefresh", //下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
                    swipeBack: false,
                    keyEventBind: {
                        backbutton: false //關閉back按鍵監聽
                    },
                    up: {
                        contentrefresh: '正在加載...',
                        callback: pullupRefresh
                    },
                    down: {
                        height: 50, //可選,默認50.觸發下拉刷新拖動距離,
                        auto: true, //可選,默認false.首次加載自動下拉刷新一次
                        contentdown: "下拉能夠刷新", //可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容
                        contentover: "釋放當即刷新", //可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容
                        contentrefresh: "正在刷新...", //可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容
                        callback: pulldownRefresh //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；

                    }
                }
            });

            //上拉加載
            function pullupRefresh() {
                mui.ajax(site_url + '/Home/Business/getOrderList', {
                    data: {
                        token: plus.storage.getItem('token'),
                        type: order_index_vue.type,
                        page: order_index_vue.pageNumber
                    },
                    dataType: 'json', //服務器返回json格式數據
                    type: 'post', //HTTP請求類型
                    timeout: 10000, //超時時間設置爲10秒,超時報錯；
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success: function(data) {
                        //服務器返回響應，根據響應結果，分析是否登陸成功；
                        if(data.data.length < order_index_vue.pageSize) {
                            order_index_vue.order.push.apply(order_index_vue.order, data.data);
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //參數爲true表明沒有更多數據了。
                        } else {
                            order_index_vue.order.push.apply(order_index_vue.order, data.data);
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                        }
                        order_index_vue.pageNumber++;
                    },
                    error: function(xhr, type, errorThrown) {
                        //異常處理；
                        mui.toast(type);
                    }
                });

            }

            /**
             * 下拉刷新具體業務實現
             */
            function pulldownRefresh() {
                //頁碼重置爲1
                order_index_vue.pageNumber = 1;
                //重置上拉加載功能爲可用
                mui('#pullrefresh').pullRefresh().refresh(true);

                mui.plusReady(function() {
                    if(plus.storage.getItem('token')) {
                        mui.ajax(site_url + '/Home/Business/getOrderList', {
                            data: {
                                token: plus.storage.getItem('token'),
                                type: order_index_vue.type,
                                page: order_index_vue.pageNumber
                            },
                            dataType: 'json', //服務器返回json格式數據
                            type: 'post', //HTTP請求類型
                            timeout: 10000, //超時時間設置爲10秒,超時報錯；
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            success: function(data) {
                                //重置上拉加載。refresh（）須要放在endPulldownToRefresh（）下面，解決蘋果問題
                                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);
                                
                                //下拉刷新判斷數據<一頁10條的時候，頁碼重置爲一
                                if(data.data.length < order_index_vue.pageSize) {
                                    order_index_vue.order = data.data;
                                    order_index_vue.pageNumber = 2;
                                    order_index_vue.ishave = true;
                                    if(data.data == null || data.data.length == 0) {
                                        order_index_vue.ishave = false;
                                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //阻止上拉加載
                                    }
                                } else {
                                    order_index_vue.order = data.data;
                                    order_index_vue.pageNumber = 2;
                                    order_index_vue.ishave = true;
                                }
                            },

                            error: function(xhr, type, errorThrown) {
                                //異常處理；
                                mui.toast(type);

                            }
                        });
                    } else {
                        mui.toast('沒有登陸', {
                            duration: 'long',
                            type: 'div'
                        })
                    }
                });
            }
        </script>
        <script type="text/javascript" charset="utf-8">
            mui.init({});
            var order_index_vue = new Vue({
                el: '#order_index',
                data: {
                    order: [], //order
                    pageNumber: 1,
                    ishave: true,
                    pageSize: 10,
                    type: 0
                },
                methods: {
                    get_over_info: function(oid) {
                        var that = this;
                        mui.ajax(site_url + '/Home/Business/businessAcceptOrder', {
                            data: {
                                token: plus.storage.getItem('token'),
                                order_id: oid
                            },
                            dataType: 'json', //服務器返回json格式數據
                            type: 'post', //HTTP請求類型
                            timeout: 10000, //超時時間設置爲10秒,超時報錯；
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            success: function(data) {

                                mui.toast(data.msg, {
                                    duration: '200',
                                    type: 'div'
                                })
                                if(data.status == 1) {
                                    mui.toast(data.msg, {
                                        duration: '200',
                                        type: 'div'
                                    })

                                } else {
                                    mui.toast(data.msg, {
                                        duration: '200',
                                        type: 'div'
                                    })
                                }

                            },
                            error: function(xhr, type, errorThrown) {
                                mui.toast('網絡錯誤');
                            }
                        });
                    }

                }
            })

            //跳詳情
            $("body").on("tap", ".gz_order_body_1", function(e) {
                e.stopPropagation();
                var id = this.getAttribute("data-id"); //獲取產品的data-id
                mui.openWindow({
                    url: "../order/order_details.html",
                    id: "order_details",
                    extras: {
                        order_index_id: id
                    }
                })
            })
            $("body").on("tap", ".gz_order_body_2", function(e) {
                e.stopPropagation();
                var id = this.getAttribute("data-id"); //獲取產品的data-id
                mui.openWindow({
                    url: "../order/order_details.html",
                    id: "order_details",
                    extras: {
                        order_index_id: id
                    }
                })
            })

            //執行ajax進個人訂單
            mui('body').on('tap', '.btn-block', function(e) {
                var order_id = mui(this)[0].dataset.order_id; //獲取 ：data的值
                e.stopPropagation(); //阻止冒泡
                order_index_vue.get_over_info(order_id);
                var botton = plus.webview.getLaunchWebview();
                var order_sub = plus.webview.getWebviewById('order_over_sub.html');

                mui.fire(botton, "jiedan", ''); //自定義事件   
                mui.fire(order_sub, "jiedansub", ''); //自定義事件  
            })


            //登陸時訂單大廳從新刷新
            window.addEventListener('refresh_index', function(e) {
                pulldownRefresh();
            })
        </script>

    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。