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元的阿里云大礼包，快来领取吧~