MUI ---上拉加載，下拉刷新 Ajax傳輸數據

送您一個最高1888元的阿里雲大禮包，快來領取吧~

　　isUp代表是否上拉

　　mui('.mui-scroll-wrapper').scroll({indicators: false});寫在頁面script中  解決雙滾動條

　　也可以計算頁面高度

　　 document.body.clientWidth ==> BODY對象寬度
　　 document.body.clientHeight ==> BODY對象高度
 　　document.documentElement.clientWidth ==> 可見區域寬度
　　 document.documentElement.clientHeight ==> 可見區域高度

　　var height = document.documentElement.clientHeight || document.body.clientHeight;

//上拉加載
    function pullupRefresh() {
        isUp = true;
        pageIndex++;
        searchData(pageIndex, keyword);
    }
    /**
     * 下拉刷新
     */
    function pulldownRefresh() {
        isUp = false;
        pageIndex = 0;
        document.getElementById('list').innerHTML = '';
        searchData(pageIndex, keyword);
    }

    function searchData(pageIndex, key) {
        var param = {
            'pageIndex': pageIndex*pageSize,
            'pageSize': pageSize,
            'roleId': localStorage.getItem("roleId"),
//            'searchCondition': key
            'searchModel':{
                'value':key
            }
        };
        dataUtil.requestInterface(API_CONFIG.queryContractList, param, function(data) {
            if(null != data && data.code == 1000) {
                var dataList = data.data;
                if(null != dataList && '' != dataList) {
                    if(isUp) { //上拉加載更多
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                    } else {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                        mui('#pullrefresh').pullRefresh().refresh(true);
                    }
                    document.getElementById('list').innerHTML += template('dataList', {
                        dataList: dataList
                    });
                } else {
                    if(isUp) {
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    } else {
                        mui.toast('暫無數據');
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();;

                    }
                }
            } else {
                mui.toast(data.msg);
            }

        }, function(data) {
            mui.toast('請檢查您的網絡');
        });

        //頁面加載完成綁定數據
        mui('.project_contract').on('tap', '.project_title', function(e) {
            mui.openWindow({
                url: "goods_detail.html",
                id: "goods_detail",
                extras: {
                    item: this.dataset.item
                }
            });
            e.stopPropagation(); //阻止冒泡
        });
    }
    /**
     * 加載
     */
    function myRefresh() {
        mui("#pullrefresh").pullRefresh({
            down: {
                style: 'circle',
                auto: true,
                callback: pulldownRefresh
            },
            up: {
                auto: false,
                contentrefresh : "正在加載...",
                callback: function() {
                    setTimeout(function() {
                        pullupRefresh();
                    }, 1000);
                }
            }
        })
    }
    return {
        init: function() {
            bindEventHandler();
            myRefresh();//加載
        }
    }

 

獲取mui滾動條的高度

document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function(e) {
    console.log(e.detail.y);
})

另一種綁定模板數據的方法   綁定在某個html元素之后

dataUtil.requestInterface(API_CONFIG.queryCBSInfo, param, function(data) {
            if(null != data) {
                if(data.STATUS == true) {
                    var result = data.DATA.pageBean;
                    //清空模板數據
                    $$('.contractor_list').remove();
                    //重新加載數據時滾動到頂部
                    mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100);
                    if(null != result && null != result.items && result.items.length > 0) {
                        var htmlTxt = template('control_list', { resultList: result.items }); $$('.all_contractor').after(htmlTxt);
                    }
                } else {
                    mui.toast(data.MSG);
                }
            } else {
                mui.toast('請檢查您的網絡');
            }
        }, function(xhr, type, errorThrown) {
            mui.toast('Err:' + type);
        });

 

送您一個最高1888元的阿里雲大禮包，快來領取吧~