微信小程序 上拉触底分页

Posted IronMenPHP

tags:

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

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

微信小程序 上拉触底分页

文章目录

 


前言

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


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

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

//页面上拉触底事件的处理函数
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网络请求的数据。


总结

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

以上是关于微信小程序 上拉触底分页的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序的下拉刷新事件和上拉触底事件

微信小程序页面事件

微信小程序-- 页面事件 - 上拉触底 - 案例(二十七)

微信小程序~上拉加载onReachBottom

页面事件---下拉刷新事件----上拉触底事件

微信小程序全局配置