微信小程序实现分页加载效果

 更新时间:2020年11月19日 14:55:08   作者:开猿节流  
这篇文章主要为大家详细介绍了微信小程序实现分页加载效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。

数据来自于后端(lumen带分页)

/**
   * @todo 获取订单列表
   * @return mixed
   */
  public function getOrderList(){
    $field = ['id','order_no','name','created_at','desc','order_status','pay_status'];
    $orders = Order::where('uid',$this->user->id)->orderBy('created_at', 'desc')->paginate(5, $field);
    return $orders;
}

数据

..wxjs

const util = require('../../utils/util.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
  // 前台显示list
  showlist: [],
  // 初始化page
  page: 2,
  height:600,
 },
 onLoad: function (options) {
  var self = this;
  // 请求后台 
  util.ajax('order/get' , '', 'GET', res => {
    self.setData({
     showlist: res.data,
    })
  })
 },
 /**
 * 页面上拉触底事件的处理函数
 */
 upcroll: function (e) {
  var self = this;
  var page = self.data.page++;
  // 请求后台,获取下一页的数据。
  util.ajax('order/get?page=' + page, '', 'GET', res => {
   self.setData({
    //向页面已有数据后面加数据
    showlist: self.data.showlist.concat(res.data),
   })
   if (res.data=='') {
    wx.showToast({
     title: '没有更多数据',
    })
   }
  })
 }
})

..wxml

<view class='warp'>
<view class='container' >
 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower="upcroll" lower-threshold="20" >
  <view class='alllist' wx:for="{{showlist}}" wx:for-item="j" wx:key="key" name="info_border">
  <view class='list'>
  <view class='img'>
   <image src='../../imges/imgicon/icon2.png' class='img'></image>
   <view class='text'>{{j.name}}</view>
  </view>
  <view class='message'>
   <view class='te'><text class='text'>日期:</text><text class='text cor'>{{j.created_at}}</text></view>
   <view class='te text on'><text class='text'>描述:</text>{{j.desc}}</view>
  </view>
  </view>
  <view class='text statsin'>
  <view class='a left'>
  <navigator url='#' class='waiting' >待接单</navigator>
  </view>
  <view class='a'>
  <navigator url='#' class='okorder'>已完成</navigator>
  </view>
  </view>
 </view>
 </scroll-view>
 </view> 
</view>

结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现电商平台商品细节图

    JavaScript实现电商平台商品细节图

    这篇文章主要为大家详细介绍了JavaScript实现电商平台商品细节图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript+canvas实现七色板效果实例

    JavaScript+canvas实现七色板效果实例

    这篇文章主要介绍了JavaScript+canvas实现七色板效果的方法,结合实例形式详细分析了JavaScript结合html5的canvas技术实现绘制七色板效果的相关技巧,需要的朋友可以参考下
    2016-02-02
  • 符合W3C网页标准的iframe标签的使用方法

    符合W3C网页标准的iframe标签的使用方法

    符合W3C网页标准的iframe标签的使用方法...
    2007-07-07
  • 微信小程序--特定区域滚动到顶部时固定的方法

    微信小程序--特定区域滚动到顶部时固定的方法

    这篇文章主要介绍了微信小程序--特定区域滚动到顶部时固定的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JS逆向之 webpack 打包站点实战原理分享

    JS逆向之 webpack 打包站点实战原理分享

    本文主要介绍了JS逆向之webpack打包站点实战原理分享,webpack是前端程序员用来进行打包JS的技术,打包之后的代码特征非常明显,更多相关知识需要的小伙伴可以参考下面文章详细内容
    2022-06-06
  • JavaScript逆向调试技巧总结分享

    JavaScript逆向调试技巧总结分享

    当我们抓取网页端数据时,经常被加密参数、加密数据所困扰,如何快速定位这些加解密函数,尤为重要,下面这篇文章主要给大家介绍了关于JavaScript逆向调试技巧的相关资料,需要的朋友可以参考下
    2022-06-06
  • 如何使用ImageDecoder API让GIF图片暂停播放

    如何使用ImageDecoder API让GIF图片暂停播放

    在本文中,我们介绍了如何使用ImageDecoder API来暂停GIF图像的播放,虽然这需要一些JavaScript编程知识,但它是一个非常强大的技术,可以让您对GIF图像进行各种高级操作,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • JavaScript提高加载和执行效率的方法

    JavaScript提高加载和执行效率的方法

    JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码,从而提高其在浏览器中的性能。
    2017-02-02
  • 解决layer弹出层中表单不起作用的问题

    解决layer弹出层中表单不起作用的问题

    今天小编就为大家分享一篇解决layer弹出层中表单不起作用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 分析JS中this引发的bug

    分析JS中this引发的bug

    这篇文章主要介绍了分析JavaScript中this引发的bug以及相关的处理方法分析,一起学习下吧。
    2017-12-12

最新评论