溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能

發(fā)布時(shí)間:2020-11-20 14:51:03 來(lái)源:億速云 閱讀:209 作者:Leah 欄目:開發(fā)技術(shù)

本篇文章為大家展示了小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

分頁(yè)加載功能大家遇到的應(yīng)該會(huì)經(jīng)常遇到,應(yīng)用場(chǎng)景也很多,例如微博,QQ,微信朋友圈以及新聞?lì)悜?yīng)用,都會(huì)有分頁(yè)加載的功能,這不僅節(jié)省了我們用戶的流量,還提升了用戶體驗(yàn)。那么今天的這篇文章就是介紹微信小程序中如何實(shí)現(xiàn)分頁(yè)加載的功能。

數(shù)據(jù)來(lái)自于后端(lumen帶分頁(yè))

/**
   * @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;
}

數(shù)據(jù)

小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能

..wxjs

const util = require('../../utils/util.js');
Page({
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
  // 前臺(tái)顯示list
  showlist: [],
  // 初始化page
  page: 2,
  height:600,
 },
 onLoad: function (options) {
  var self = this;
  // 請(qǐng)求后臺(tái) 
  util.ajax('order/get' , '', 'GET', res => {
    self.setData({
     showlist: res.data,
    })
  })
 },
 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 upcroll: function (e) {
  var self = this;
  var page = self.data.page++;
  // 請(qǐng)求后臺(tái),獲取下一頁(yè)的數(shù)據(jù)。
  util.ajax('order/get?page=' + page, '', 'GET', res => {
   self.setData({
    //向頁(yè)面已有數(shù)據(jù)后面加數(shù)據(jù)
    showlist: self.data.showlist.concat(res.data),
   })
   if (res.data=='') {
    wx.showToast({
     title: '沒(méi)有更多數(shù)據(jù)',
    })
   }
  })
 }
})

..wxml

<view class='warp'>
<view class='container' >
 <scroll-view scroll-y='true'  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>

結(jié)果:

小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能

上述內(nèi)容就是小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI