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">案例1span>
                div>
            div>  
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例2span>
                div>
            div>
        div>
    div>

js:

 

无限滚动：

html：

 <%--无限滚动容器--%>
    <div class="page-content infinite-scroll-content">
        <div class="simple-list">
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例1span>
                div>
            div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例2span>
                div>
            div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例3span>
                div>
            div>
            <div class="card">
                <div class="card-footer"><span style="color: #CC0000">案例4span>
                div>
            div>
        div>
        <%--预加载器--%>
        <div class="preloader infinite-scroll-preloader">div>
    div>

 

js：

 

解释：

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

 

如有问题，欢迎留言

转载于:https://www.cnblogs.com/ZbsCc/p/11533709.html