欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

framework7 下拉刷新、无限滚动

程序员文章站 2022-04-29 15:34:43
下拉刷新: html: js: 无限滚动: html: js: 解释: 如有问题,欢迎留言 ......

下拉刷新:

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

 

如有问题,欢迎留言