双webview下拉刷新上拉加载

主页：

collection.html

<div id="content" class="content">

</div>

 

js:

mui.init({
            gestureConfig:{
                doubletap:true
            },
            subpages:[{
                url:'collectionSub.html',
                id:'collectionSub.html',
                styles:{
                    top: '45px',
                    bottom: '0px',
                }
            }]
        });

子页面：

collectionSub.html

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" pageNumber="0" totalPages="0">
            <div class="mui-scroll" id="content">
                
            </div>

        </div>
        <script id="test" type="text/html">
            <ul class="mui-table-view mui-table-view-chevron walletHistoryUl">

                <li class='refund-Item-li'>
                    <div class="Chargingpile" onclick="seemore({{id}},'{{title}}',{{dist}},{{latitude}},{{longitude}})">
                        <h4>{{ title }}<span class="distance">{{dist}}m</span></h4>
                        <p>{{ address }}</p>
                        <div>
                            <div class="Number"><img src="img/kuai.png" /><span>快充{{ fastFilling }}个</span></div>
                            <div class="Number"><img src="img/man.png" /><span>慢充{{ slowFilling }}个</span></div>
                            <a class="seemore">查看详情></a>
                        </div>
                    </div>
                </li>
            </ul>
        </script>

js:

var pays = {};
            var w = null;
            var lat = 0;
            var lng = 0;
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    up: {
                        callback: pullupRefresh
                    },
                    down: {
                        callback: pulldownRefresh
                    }
                }
            });

            mui.plusReady(function() {
                myCollectChargingPile("1");
            })

            function pulldownRefresh() {
                setTimeout(function() {
                    myCollectChargingPile("1");
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                    mui('#pullrefresh').pullRefresh().refresh(true);
                }, 1500);
            }

            function pullupRefresh() {
                setTimeout(function() {
                    pageNumber = $("#pullrefresh").attr("pageNumber");
                    totalPages = $("#pullrefresh").attr("totalPages");
                    console.log("pageNumber:" + pageNumber);
                    console.log("totalPages:" + totalPages);
                    if(pageNumber >= totalPages) {
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                        return;
                    } else {
                        // 非最后一页，则请求下一页
                        pageNumber++;
                    }
                    mui('#pullrefresh').pullRefresh().refresh(true);
                    myCollectChargingPile(pageNumber);
                }, 1500);
            }

            function myCollectChargingPile(pageNum) {
                var clat = parseFloat(plus.storage.getItem('lat'));
                var clng = parseFloat(plus.storage.getItem('lng'));
                $.ajax({
                    type: "post",
                    url: IP + '/mobile/user/myCollectChargingPile.html',
                    data: {
                        token: plus.storage.getItem("token"),
                        pageSize: "20",
                        pageNumber: pageNum
                    },
                    dataType: "json",
                    success: function(data) {
                        if(pageNum === data.data.totalPage) {
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                        } else {
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                        }
                        $("#pullrefresh").attr("totalPages", data.data.totalPage);
                        $("#pullrefresh").attr("pageNumber", data.data.pageNumber);
                        if(pageNum == 1) {
                            $("#content").empty();
                        }
                        if(data.errorCode == 0) {
                            var list = data.data.list;
                            var ul = $(".mui-table-view");
                            $.each(list, function(i, n) {
                                var address = n.address;
                                var latitude = n.latitude;
                                var id = n.id;
                                var slowFilling = n.slowFilling;
                                var title = n.title;
                                var fastFilling = n.fastFilling;
                                var longitude = n.longitude;
                                var dist = getDistance(clat, clng, latitude, longitude);
                                var data = {
                                    address: address,
                                    latitude: latitude,
                                    id: id,
                                    slowFilling: slowFilling,
                                    title: title,
                                    fastFilling: fastFilling,
                                    longitude: longitude,
                                    dist: dist,
                                };
                                console.log(JSON.stringify(data))
                                var html = template('test', data);
                                $('#content').append(html);

                            });

                        } else {
                            plus.nativeUI.toast(data.errorInfo);
                        }
                    }
                });
            }

 

来源：oschina

链接：https://my.oschina.net/u/4368086/blog/3828287