MUI 學習---頁面跳轉；頁面傳參；接口數據請求；頁面數據綁定；構建點擊事件；回調刷新；數據列表支持從右向左滑動觸發刪除；撥打電話

1、頁面跳轉、頁面傳參、構建點擊事件

/*給ul 下面的li 添加點擊事件*/
        mui('ul').on("tap", "li", function() {
            //獲取html頁面中data-item中的item對象
            var obj = this.dataset.item;
            if(null != obj && obj != '' && obj != undefined) {
                //跳轉頁面
                mui.openWindow({
                    url: "editProduct.html",
                    id: "editProduct",
                    //傳入的參數
                    extras: {
                        data: obj
                    }
　　　　　　　　　　　　show: {
　　　　　　　　　　　　　　autoShow: true, //頁面loaded事件發生后自動顯示，默認為true；
　　　　　　　　　　　　　　aniShow: 'slide-in-right', //頁面顯示動畫，默認為”slide-in-right“；
　　　　　　　　　　　　　　duration: 10 //頁面動畫持續時間，Android平台默認100毫秒，iOS平台默認200毫秒；
　　　　　　　　　　　　},
　　　　　　　　　　　　waiting: {
　　　　　　　　　　　　　　autoShow: false //自動顯示等待框，默認為true
　　　　　　　　　　　　}
　　　　　　　　　　});

 } else { mui.toast('數據缺失'); } });

2、頁面數據綁定、接口數據請求

　　

dataUtil.requestInterface(API_CONFIG.getAllProduct, param, function(data) {
            console.log(JSON.stringify(data));
            if(null != data && data.STATUS == true) {
                //數據賦值
                var recordList = data.DATA;
                if(null != recordList && recordList != '' && recordList.length > 0) {
                    //template模板中的數據放到id 為iphone-list中
                    document.getElementById('iphone-list').innerHTML = template('record', {
                        recordList: recordList
                    });
                } else {
                    mui.toast('暫無數據');
                }
            } else {
                mui.toast(data.MSG);
            }
            //正確的向左滑動刪除  
            mui("li").on("tap", "a", function() {
                var id = this.dataset.id;
                var ids = [];
                ids.push(id);
                var param = {
                    'ids': ids
                };

                dataUtil.requestInterface(API_CONFIG.delProduct, param, function(data) {
                    if(null != data && data.STATUS == true) {
                        mui.toast(data.MSG);
                        mui.back();
                    } else {
                        mui.toast(data.MSG);
                    }
                }, function(data) {
                    if(null != data && data.STATUS == false) {
                        mui.toast(data.MSG);
                    } else {
                        mui.toast('請檢查您的網絡');
                    }
                });
            });
        }

 

3、回調刷新

<script type="text/javascript">
            mui.init({
                swipeBack: false, //啟用右滑關閉功能
                beforeback: function() {　　　　 //獲得父頁面的webview
                    var list = plus.webview.currentWebview().opener();
                    //觸發父頁面的自定義事件(refresh),從而進行刷新
                    mui.fire(list, 'refresh');
                    //返回true,繼續頁面關閉邏輯
                    return true;
                }
            });
            mui.plusReady(function() {
                    EditProduct.init();
            });
        </script>

父級頁面

<script type="text/javascript">
        mui.init({
            swipeBack: false //啟用右滑關閉功能
        });
        mui.plusReady(function() {
            Product.init();
            mui('.mui-scroll-wrapper').scroll();
            //刷新頁面
            window.addEventListener('refresh', function(e) {
                Product.init();//也可以是重新加載頁面
            });
        });
    </script>

4、數據列表支持從右向左滑動觸發刪除

 5.撥打電話

//點擊撥打電話
        mui('ul').on('tap', '#leader', function() {
            var btnArray = ['撥打', '取消'];
            var phone = leaderPhone;
            mui.confirm('是否撥打' + phone + '?', '提示', btnArray, function(e) {
                if(e.index == 0) {
                    plus.device.dial(phone, false);
                }
            });
        });