微信小程序實現分頁加載效果

更新時間：2020年11月19日 14:55:08 作者：開猿節(jié)流

這篇文章主要為大家詳細介紹了微信小程序實現分頁加載效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

分頁加載功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁加載的功能，這不僅節(jié)省了我們用戶的流量，還提升了用戶體驗。那么今天的這篇文章就是介紹微信小程序中如何實現分頁加載的功能。

數據來自于后端（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>

結果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序實現多宮格抽獎活動
這篇文章主要為大家詳細介紹了微信小程序實現多宮格抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
js的隱含參數(arguments,callee,caller)使用方法
本篇文章只要是對js的隱含參數(arguments,callee,caller)使用方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
原生js實現購物車功能
這篇文章主要為大家詳細介紹了原生js實現購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
js瀏覽器滾動條卷去的高度scrolltop(實例講解)
下面小編就為大家?guī)硪黄猨s瀏覽器滾動條卷去的高度scrolltop(實例講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
基于js disabled="false"不起作用的解決辦法
本篇文章是對js disabled="false"不起作用的解決辦法進行了詳細的分析介紹，需要的朋友參考下
2013-06-06
JavaScript中判斷整數的多種方法總結
這篇文章主要介紹了JavaScript中判斷整數的多種方法總結,本文總結了5種判斷整數的方法,如取余運算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下
2014-11-11
基于js中的原型(全面講解)
下面小編就為大家?guī)硪黄趈s中的原型(全面講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
javascript中tostring()和valueof()的用法及兩者的區(qū)別
基本上，所有JS數據類型都擁有valueOf和toString這兩個方法，null除外。它們倆解決javascript值運算與顯示的問題，本文給大家介紹javascript中tostring()和valueof()的用法及兩者的區(qū)別，對js tostring valueof相關知識感興趣的朋友一起學習吧
2015-11-11
JavaScript常用工具函數大全
這篇文章主要介紹了JavaScript常用工具函數,匯總整理了各種JavaScript常用工具函數,包括獲取、判斷、轉換、設置等相關功能函數的定義與使用方法,需要的朋友可以參考下
2020-05-05
JavaScript實現簡單的計算器
這篇文章主要為大家詳細介紹了JavaScript實現簡單的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01