字体-字体+

使用mui实现上拉加载和下拉刷新

2018-01-29 经验分享 访问量 136

MUI号称是最接近原生APP体验的高性能前端框架,具体怎么样不好评价,不过用它来写写前端的页面还是挺爽的,很方便很快,刚好最近博主在一个项目中需要使用上拉加载这么一个功能,最终的效果还不错,所以推广一下~~~

使用mui还是挺简单,无非是引用一下css和js,有不知道咋用的小伙伴可以看看它的官方手册以及demo,很简单地,就能上手。http://dcloud.io/hellomui/

下面看看代码。

var count = 2;//参数,起码页数
//var _result = "<?php echo $count?>";
var order_status = "<?php echo $_GPC['order_status']?>";//参数,看自己情况

mui.init({
            pullRefresh: {
                //container: '.aui-content-padded',
                container: '.show-data-push',//装载数据的容器
                /*down: {//下拉刷新
                    auto:false,//可选,默认false.自动下拉刷新一次
                    contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
                    contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
                    contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
                    callback: pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                },*/
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    style:'circle',//必选,
                    auto: false,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
                    callback: pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                }
            }
        });

        
        function pullupRefresh() {
            //下面完全就是自己的逻辑了,无非就是ajax请求下数据
            setTimeout(function () {
                var data = {
                    page: count,
                    order_status: order_status
                };

                $.ajax({
                    type: 'post',
                    url: upLoadOrderData,
                    data: data,
                    beforeSend: function (XMLHttpRequest) {
                        layer.open({
                            type: 2
                            , content: '加载中'
                        });
                    },
                    success: function (data, textStatus) {
                        if (JSON.parse(data) == '' || !JSON.parse(data)) {
                            $('.mui-pull-bottom-pocket').attr('style','display:none!important;');
                            parent.layer.close($('.layui-m-layer').attr('index'));
                            lay_open("{NO_DATA_NOTICE}");
                            return false;
                        }
                        count++;//翻下一页
                        $('section').find('.aui-content-padded:last').after(JSON.parse(data));
                        mui('.show-data-push').pullRefresh().endPullupToRefresh(); //参数为true,请求完后要停止下,防止一直在加载

                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        var h = $(document).height()-$(window).height();
                        $(document).scrollTop($(document).height());
                        //$("html,body").animate({scrollTop:$(document).height()},500);
                        $('.mui-pull-bottom-pocket').insertAfter('.aui-content-padded>div:last');
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
                parent.layer.close($('.layui-m-layer').attr('index'));
            }, 500);
        }

这样看来,mui的加载是不是很简单呢,不过在使用中会有一些需要注意的地方,后面陆续放出~~~

mui加载

标签:

原文来自:http://www.dawnfly.cn/article-1-385.html,转载请注明出处,谢谢【破晓博客复制链接地址

2017春季新款女装上衣衬衫女长袖百搭印花系带蝴蝶结雪纺衫衬衣潮