微信小程序上拉触底分页

最新推荐文章于 2024-08-01 13:39:52 发布

IronMenPHP

最新推荐文章于 2024-08-01 13:39:52 发布

阅读量649

点赞数 3

分类专栏：微信小程序文章标签： php 小程序

本文链接：https://blog.csdn.net/qq_54337367/article/details/117333658

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在微信小程序中利用生命周期事件和网络请求实现分页功能，包括设置初始页、处理上拉触底事件触发的页面加载、后端API设计以及整合数据。通过实例代码展示了如何配合wx.request进行动态加载更多数据。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

微信小程序上拉触底分页

文章目录

前言
一、微信小程序生命周期上拉触底事件
二、使用步骤
- 1.在data 设定默认第一页
- 2.进行分页的显示
- 3.上拉触底事件每触底一次页面+1 请求后台
总结

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、微信小程序生命周期上拉触底事件

//页面上拉触底事件的处理函数
onReachBottom: function () {

}

二、直接上代码

1.在data 设定默认第一页

2.进行分页的显示

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    var pageNum = this.data.pageNum;
    console.log(pageNum)
    wx.request({
      url: 'http://tp51.com/index.php/testapi/wineshop/index',
      data: {
        pageNum: pageNum
      },
      success: (res) => {
        _this.setData({
          wineData: res.data.data
        })
      }
    })
  },

3.上拉触底每触底一次页面+1 请求后台

//响应触底函数
  getNoticeList(){
    (this.data.pageNum) ++;
    var that = this
    let pageNum = this.data.pageNum;
     wx.request({
      url: "http://tp51.com/index.php/testapi/wineshop/index",
      data: {
        pageNum: pageNum 
            },
      success: function (res) {
        that.setData({
          wineData: that.data.wineData.concat(res.data.data),
          count: res.data.count
        })
      }
    })
  },

后端设定偏移量

  /**
     * 显示资源列表
     * @return \think\Response
     */
    public function index(Request $request)
    {
        $whereText = $request->param('whereText');

        $pageNum = $request->param('pageNum');
        $limit = 5;
        $start = ($pageNum-1)*$limit;

        if ($whereText == ""){
            $wineData = \app\testapi\model\Wineshop::with('room')->limit($start,$limit)->select()->toArray();
            $count = count(WineshopModel::select());
        }else{

            $wineData =   WineshopModel::searchData(self::INDEX_NAME,$whereText);

        }


        return json(['code' => 200, 'data' => $wineData,'count'=>$count]);

    }

该处使用的url网络请求的数据。