微信小程序 上拉加载下一页数据

js代码

// pages/list/list.js
let page=1;
let lastpage=0;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    order:[]
  },
  /**
   * 生命周期函数--监听页面加载
  //  */
  // 
  onLoad: function (options) {
   //页面加载调用查询函数
   this.getlist()
  }, 
  //上拉触底函数
  onReachBottom: function () {
    if(page>lastpage)
    {
      wx.showToast({
        title: '我是有底线的',
      })
       return false
    }
//如果有下一页就再次调用查询函数
    this.getlist();
  },
  getlist()
  {
    let that=this
    wx.request({
      url: 'http://www.hejialing.com/month6/orderData',
      data:{
        page:page
      },
      success(res)
      {
           //将查询出来的数据和公共变量的数据拼接起来
         let data=that.data.order.concat(res.data.data.data);
       //后台做分页查询传回来的最后一页(也就是总页数)
         lastpage=res.data.data.last_page
     //页面加一
         page++;
        //将数据赋值给公共变量
         that.setData({
           order:data
         })
         console.log(that.data.order);
      }
    })
  },
})

路由代码 

//瀑布流查询
Route::get('articleData','ArticleController/index');

控制器代码 

 //查询数据
    public function index(Request $request)
    {
        $page=$request->param('page');
        $obj=new ArticleModel();
        $data=$obj->selectData($page);
        if($data)
        {
            return  json(['code'=>200,'mes'=>'查询成功','data'=>$data]);
        }

    }

模型代码 

 protected $table='article';
    public function selectData($page)
    {
        return $this->paginate([
            'page'=>$page,
            'list_rows'=>5,
        ]);
    }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信小程序上拉加载更多数据,你可以通过以下步骤实现: 1. 在 wxml 文件中添加一个 scroll-view 组件,并设置其 scroll-into-view 属性为一个变量,用于记录当前滚动到的位置。 2. 在 js 文件中,定义一个变量 page,表示当前加载的页数,初始值为 1。 3. 在 scroll-view 组件上绑定一个 scrolltolower 事件,当滚动到底部时触发该事件。 4. 在 scrolltolower 事件中,发送请求获取下一页数据,并将 page 加 1。 5. 将获取到的数据添加到原有数据列表中。 6. 在获取数据之前,显示一个 loading 提示。 7. 在请求结束后,隐藏 loading 提示,并更新 scroll-into-view 属性,将页面滚动到数据的最后一项。 以下是一个简单的示例代码: ``` // wxml 文件 <scroll-view scroll-into-view="{{scrollIntoView}}" scroll-y="true" bindscrolltolower="loadMoreData"> <view wx:for="{{dataList}}" wx:key="{{index}}">{{item}}</view> </scroll-view> // js 文件 Page({ data: { dataList: [], // 数据列表 page: 1, // 当前页数 scrollIntoView: '', // 当前滚动到的位置 loading: false // 是否正在加载数据 }, onLoad: function () { this.loadData() }, // 加载一页数据 loadData: function () { // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=1', success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: res.data.data }) } }) }, // 加载更多数据 loadMoreData: function () { // 如果正在加载数据,则不处理 if (this.data.loading) { return } // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=' + (this.data.page + 1), success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: this.data.dataList.concat(res.data.data), page: this.data.page + 1, scrollIntoView: 'item-' + (this.data.dataList.length - 1) // 将页面滚动到最后一项 }) }, complete: () => { // 标记数据加载完成 this.setData({ loading: false }) } }) // 标记正在加载数据 this.setData({ loading: true }) } }) ``` 在上述示例中,我们使用了 wx.showLoading 和 wx.hideLoading 方法来显示和隐藏 loading 提示。注意,在请求结束后,需要在 complete 回调函数中调用 setData 方法,以更新 loading 变量的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值