您好,登錄后才能下訂單哦!
本篇文章為大家展示了小程序開發(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ù)
..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é)果:
上述內(nèi)容就是小程序開發(fā)中怎么樣實(shí)現(xiàn)一個(gè)分頁(yè)加載功能,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(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)容。