framework7 下拉刷新、無限滾動

下拉刷新：

html:

    <div class="page-content ptr-content">
　　　　　<%--下拉刷新圖標--%>
        <div class="ptr-preloader">
            <div class="preloader"></div>
            <div class="ptr-arrow"></div>
        </div>
        <div class="page-content" style="padding-top:0px">
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例1</span>
                </div>
            </div>  
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例2</span>
                </div>
            </div>
        </div>
    </div>

js:

<script>
    return {
        on: {
            pageInit: function (e, done) {
                $('.ptr-content').on('ptr:refresh', function (e) {
                    //此處編寫刷新邏輯代碼
                    console.log("開始刷新");
                    setTimeout(function () {
                        console.log("結束");
                        app.ptr.done();
                    }, 1000);
                });
            }
        }
    }
</script>

 

無限滾動：

html：

 <%--無限滾動容器--%>
    <div class="page-content infinite-scroll-content">
        <div class="simple-list">
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例1</span>
                </div>
            </div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例2</span>
                </div>
            </div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例3</span>
                </div>
            </div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例4</span>
                </div>
            </div>
        </div>
        <%--預加載器--%>
        <div class="preloader infinite-scroll-preloader"></div>
    </div>

 

js：

 

<script>
    return {
        on: {
            pageInit: function (e, done) {
                var allowInfinite = true;//加載標志
                var lastItemIndex = $('.simple-list div[class="card"]').length;//現有加載量                
                var maxItems = 200;//最大加載量                
                var itemsPerLoad = 5;//每次加載量

                //滾動事件處理程序
                $('.infinite-scroll-content').on('infinite', function () {
                    if (!allowInfinite) return;// 如果正在加載，退出
                    console.log("當前數量：" + lastItemIndex);
                    allowInfinite = false;//設置加載標志

                    //模擬1秒加載
                    setTimeout(function () {
                        //設置正在加載標志
                        allowInfinite = true;
                        if (lastItemIndex >= maxItems) {
                            app.infiniteScroll.destroy('.infinite-scroll-content');//沒有更多可加載項，銷毀加載事件，防止不必要加載                           
                            $('.infinite-scroll-preloader').remove(); //刪除預緊器
                            return;
                        }
                        //生成新html
                        var html = '';
                        for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {
                            html += '<div class="card">';
                            html += '<div class="card-footer">';
                            html += '<span style="color: #CC0000">案例' + i + '</span>';
                            html += '</div>';
                            html += '</div>';
                        }
                        $('.simple-list').append(html); //綁定                       
                        lastItemIndex = $('.simple-list div[class="card"]').length; //更新最近索引
                        console.log("加載后數量：" + lastItemIndex);
                    }, 1000);
                });
            }
        }
    }
</script>

解釋：

pageInit: function (e, done) {} 代表文檔就緒函數

$('.ptr-content').on('ptr:refresh', function (e) {} 代表class為“ptr-content”的div下拉刷新事件（ptr：refresh是下拉刷新事件）

$('.infinite-scroll-content').on('infinite', function () {} 代表class為“infinite-scroll-content”的div滾動事件（infinite是滾動事件）

 

如有問題，歡迎留言