微信小程序 上拉触底分页

Posted 2021-06-19 IronMenPHP

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

微信小程序 上拉触底分页

文章目录

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

---

总结

根据官方手册进行规划代码