mescroll上拉加载

前端使用mescroll 网站 github

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
    down: {
        callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
    },
    up: {
        callback: upCallback, //上拉加载的回调
        isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
    }
});
//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
    Zepto.ajax({
        url: "/wap/index/mescroll_bottom.html",
        dataType: 'json',
        data: { p: page.num },
        success: function(data) {
            if (data.code==1) {
                var tag = '';
                for (i in data.data) {
                    tag += `
                    <div>
                        <a href="javascript:void(0);" class="weui_panel weui_media_box weui_media_appmsg_l">
                            <div class="weui_media_hd" style="display:inline-block">
                                <img class="weui_media_appmsg_thumb" src="//m.luhong421.com/${data.data[i]['img']}">
                            </div>
                            <div class="weui_media_bd" style="display:inline-block">
                                <h4 class="weui_media_title">${data.data[i]['goods_name']}</h4>
                                <p class="weui_media_desc">${data.data[i]['item']}级${data.data[i]['goods_num']}扎</p>
                                <p class="righ_a">
                                <span class="amount_a">单价:${data.data[i]['goods_price']}</span>
                                </p>
                            </div>
                            <span style="display:inline-block;float:right;color:red;padding-top: 2em;">${data.data[i]['final_price']}元</span>
                        </a>
                        <div class="weui_btn_area weui_btn_area_inline btn-area bbttnn">
                            <a href="javascript:;" class="weui_btn weui_btn_primary mini" onclick="issure(${data.data[i]['rec_id']})">抢单</a>
                        </div>
                    </div>
                    `;
                }
                Zepto('.list').append(tag);
            //方法一(推荐): 后台接口有返回列表的总页数 totalPage
            //必传参数(当前页的数据个数, 总页数)
            mescroll.endByPage(data.length, data.totalpage);

            //设置列表数据
            //setListData(data);//自行实现 TODO
            }
        },
        error: function(e) {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态
            mescroll.endErr();
        }
    });
}

后端使用

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;

class Data extends Controller
{
    public function index()
    {
        // 前端从1页面开始，后端从(1-1)开始
        $p        = input('p') ?? 1;
        $p_n      = input('p_n') ?? config('paginate.list_rows');
        $list     = Db::table('tp_goods')->order('goods_id ASC')->limit(($p - 1) * $p_n, $p_n)->select();
        $count    = Db::table('tp_goods')->count();
        $all_page = ceil($count / $p_n);
        $data     = [
            'p'        => $p,
            'p_n'      => $p_n,
            'count'    => $count,
            'all_page' => $all_page,
            'list'     => $list,
        ];
        return json(['code' => 1, 'msg' => '加载成功！', 'data' => $data]);
    }
}