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是滚动事件）

 

如有问题，欢迎留言