微信小程序開發之scroll-view上拉加載數據實現

一、開發思路

1、使用小程序的scroll-view組件中提供了一個bindscrolltolower屬性監聽組件的滑動到了底部

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html.可以點擊鏈接查看scroll-view組件擁有的屬性

2、組件滑動到底部這個事件會頻繁觸發、所以為了防止多次觸發我們定義一個狀態用于管理加載的狀態、如果上拉數據狀態在加載中就不去做網絡請求加載數據

3、上拉的時候對page進行加1然后獲取網絡請求

4、數據獲取成功對獲取的數據進行疊加

二、實現代碼

1、布局

布局中我使用了scroll-view并且使用了bindscrolltolower這個屬性綁定了我的lowe函數

<scroll-view scroll-y="true" scroll-y="{{isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' style='overflow: scroll;-webkit-overflow-scrolling:touch;margin-top:130px;'><block wx:key="index" wx:for="{{dataShow}}"><view data-index='{{index}}' class="order-item"><view class="contentBody"><view class='title'>{{item.company}}</view><view class='time'>{{item.time}}</view><view class='title'><text>{{item.university}}</text><text style='margin-left:32px'>{{item.place}}</text></view><view style='margin-top: 8px'><text class='origin'>來源</text><text class='originInfo'>{{item.university}}/就業網</text></view></view></view></block><view wx:if='{{noData}}'class="noData">沒有更多了~</view></scroll-view>

2、js中的實現

stopLoadMoreTiem是我在data中定義的變量默認是false

定義page和stopLoadMoreTiem

下面就是布局中組件中bindscrolltolower綁定的函數、 that.getList()就是網絡請求方法

//下拉加載lower: function() {var that = this;if (that.stopLoadMoreTiem) {return;}this.setData({page: this.data.page + 1 //上拉到底時將page+1后再調取列表接口});that.getList();},

網絡請求方法中網絡請求成功改變stopLoadMoreTiem的狀態網絡請求成功沒有數據的時候我給nodata賦值了 ，nodata布局中負責顯示沒有更多數據 布局的顯示

/*** 請求網絡獲取列表數據*/getList() {var that = this;that.stopLoadMoreTiem = true;// if (!that.stopLoadMoreTiem) {// }wx.showLoading({title:'數據讀取中...'})wx.request({url: app.globalData.apiHost + '/page?page=' + that.data.page + '&size=10',method: 'GET',data: {queryStartDate: that.data.queryStartDate,queryEndDate: that.data.queryStartDate,},header: {'Accept': 'application/json'},success: function(res) {wx.hideLoading();if (!res.data.content || res.data.content.length === 0) {that.setData({noData: true,})return;}if (that.stopLoadMoreTiem) {if (res.data.content && res.data.content.length > 0) {that.setData({dataShow: that.data.dataShow.concat(res.data.content),total: res.data.totalElements,})}} else {that.setData({dataShow: res.data.content,total: res.data.totalElements,})}that.stopLoadMoreTiem = false;}})},

下面這塊代碼是關鍵代碼 這塊我寫的如果是上拉加載并且獲取的數據長度大于0我在這里使用concat關聯將數組疊加。

dataShow: that.data.dataShow.concat(res.data.content)

if (that.stopLoadMoreTiem) {if (res.data.content && res.data.content.length > 0) {that.setData({dataShow: that.data.dataShow.concat(res.data.content),total: res.data.totalElements,})} } else {that.setData({dataShow: res.data.content,total: res.data.totalElements,}) }

總結

以上是生活随笔為你收集整理的微信小程序开发之scroll-view上拉加载数据实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。