本文實(shí)例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內(nèi)容如下
DEMO下載
效果圖
原理
利用微信小程序的onPullDownRefresh函數(shù)（下拉刷新監(jiān)聽(tīng)函數(shù)）和onReachBottom函數(shù)（上拉加載監(jiān)聽(tīng)函數(shù)）監(jiān)聽(tīng)頁(yè)面的下拉和上拉動(dòng)態(tài)，從而對(duì)頁(yè)面數(shù)據(jù)進(jìn)行修改！
頁(yè)面配置JSON
{ "enablePullDownRefresh": true, "onReachBottomDistance": 50}WXML
<view class="tui-content"> <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view></view>JS
此處用setTimeout模擬請(qǐng)求數(shù)據(jù)；
加載數(shù)據(jù)限制三次，調(diào)用wx.showToast顯示沒(méi)有更多數(shù)據(jù)。
Page({ data: { dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], count : 0 }, onPullDownRefresh(){ var self = this; setTimeout(() => { // 模擬請(qǐng)求數(shù)據(jù)，并渲染 var arr = self.data.dataList, max = Math.max(...arr); for (var i = max + 1; i <= max + 3; ++i) { arr.unshift(i); } self.setData({ dataList: arr }); // 數(shù)據(jù)成功后，停止下拉刷新 wx.stopPullDownRefresh(); }, 1000); }, onReachBottom(){ var arr = this.data.dataList, max = Math.max(...arr); if (this.data.count < 3) { for (var i = max + 1; i <= max + 5; ++i) { arr.push(i); } this.setData({ dataList: arr, count: ++this.data.count }); } else { wx.showToast({ title: '沒(méi)有更多數(shù)據(jù)了！', image: '../../src/images/noData.png', }) } }})總結(jié)
必須在每次數(shù)據(jù)請(qǐng)求完成后，使用wx.stopPullDownRefresh()停止下拉刷新。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
