html5使用mescroll

最新推荐文章于 2024-08-10 08:22:20 发布

星星上的程序媛

最新推荐文章于 2024-08-10 08:22:20 发布

阅读量1.2k

点赞数

分类专栏：前端 html5 文章标签：前端 html5

本文链接：https://blog.csdn.net/liuy_1314/article/details/100577484

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

我将创建mescroll写成了公共函数，因为我别的页面也要用
其他配置可以看官网

//第一个参数"mescroll"对应上面布局结构div的id
function getMescroll(mescroll,callBack){
     return new MeScroll(mescroll, {
        //如果下拉刷新是重置列表数据,那么down完全可以不用配置
        down: {
            // callback: showData //下拉刷新的回调
            use: false //默认为true，不使用的时候必须加上
        },
        up: {
            callback: callBack, //上拉加载的回调
            // htmlLoading: '<p class="upwarp-progress mescroll-rotate">加载中</p>',
            //上拉加载中的布局
            htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',

        }
    });
}

这里就是页面部分，

<body>
<!-- 一定要这么写，标签可以换，具体的可以看官网 -->
    <div class="stockRecord mescroll" id="stockRecord-mescroll">
        <ul class="list-group list-group-flush "></ul>
    </div>
    <script>
        $(function () {
            var mescroll = getMescroll("stockRecord-mescroll", showData)
            function showData(page) {
                console.log(page.num + "=======" + page.size); //默认page=1，size=10，每次调用page+1，你也可以在创建mescroll的适合定义
                var htmlStr = "";
                //应setTimeout是为了让页面有那个加载的效果，体验感好点，可用可不用
                setTimeout(function () {
                //用sessionStorage来存储数据的,功能需求
                    if (typeof (Storage) !== "undefined") {
                        if (sessionStorage.stockRecordData !== "undefined") {
                            var stockRecordData = JSON.parse(sessionStorage.stockRecordData);
                            var len = stockRecordData.result.list.length;
                            var totalCount = stockRecordData.result.totalCount
                            if (stockRecordData.code == 400001) {
                                htmlStr =
                                    '<span class="glyphicon-bear glyphicon mt-5 large-font text-secondary text-center" aria-hidden="true"></span>' +
                                    '<p class="text-secondary text-center mt-3">┗|｀O′|┛ 嗷~~您还没有登录哦！！</p>'
                                $(".stockRecord").empty().append(htmlStr)
                            } else if (stockRecordData.result.totalCount === 0) {
                                htmlStr =
                                    '<span class="glyphicon-bear glyphicon mt-5 large-font text-secondary text-center" aria-hidden="true"></span>' +
                                    '<p class="text-secondary text-center mt-3">┗|｀O′|┛ 嗷~~您还没有补货记录哦！！</p>'
                                $(".stockRecord").empty().append(htmlStr)
                            } else {
                                var list = stockRecordData.result.list;
                                $.each(list, function (index) {
                                    htmlStr += '<li class="list-group-item">' +
                                        '<div class="d-flex mb-1"><div class="flex-fill ">货道号：<span class="cargoWayNum">' +
                                        list[index].cargoWayNum + '</span></div>' +
                                        '<div class="flex-fill text-right">补货数量：+<span class="stockNum">' +
                                        list[index].stockNum + '</span></div></div>' +
                                        '<div>补货时间：' + list[index].createTime + '</div>' +
                                        '</li>'
                                })
                            }
                            $(".list-group").append(htmlStr)
                            mescroll.endSuccess(len);
                            mescroll.endBySize(len, totalCount); //满足条件后不再触发上拉刷新
                        } else {
                            mescroll.endErr();
                        }
                    }
                }, 1000)

            }
        })
    </script>
</body>

效果就是这样的

使用sessionStorage存储数据（对象）

把对象转化为字符串（stringify）存放进sessionStorage

let obb = {
      name:'zhangyachoa',
      age:'18'
  }
  let str = JSON.stringify(obb)//把对象转化为字符串（stringify）存放进sessionStorage
    sessionStorage.setItem('obbj',str)
}

取出来的字符串在转化为对象JSON

JSON.parse(sessionStorage.getItem('obbj'))

星星上的程序媛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录