微信小程序上拉触底分页

Posted 2022-12-06 IronMenPHP

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序上拉触底分页相关的知识，希望对你有一定的参考价值。

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

微信小程序上拉触底分页

文章目录

前言
一、微信小程序生命周期上拉触底事件
二、使用步骤
- 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网络请求的数据。