?? 歡迎大家來(lái)到景天科技苑??

🎈🎈 養(yǎng)成好習(xí)慣，先贊后看哦~🎈🎈

🏆 作者簡(jiǎn)介：景天科技苑
🏆《頭銜》：大廠架構(gòu)師，華為云開(kāi)發(fā)者社區(qū)專家博主，阿里云開(kāi)發(fā)者社區(qū)專家博主，CSDN全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者，掘金優(yōu)秀博主，51CTO博客專家等。
🏆《博客》：Python全棧，前后端開(kāi)發(fā)，小程序開(kāi)發(fā)，人工智能，js逆向，App逆向，網(wǎng)絡(luò)系統(tǒng)安全，數(shù)據(jù)分析，Django，fastapi，flask等框架，linux，shell腳本等實(shí)操經(jīng)驗(yàn)，網(wǎng)站搭建，數(shù)據(jù)庫(kù)等分享。

所屬的專欄：微信小程序開(kāi)發(fā)零基礎(chǔ)教學(xué)，難點(diǎn)與應(yīng)用實(shí)戰(zhàn)總結(jié)
景天的主頁(yè)：景天科技苑

1.上滑加載更多

結(jié)合上一章我們的項(xiàng)目，先在原來(lái)的基礎(chǔ)上添加個(gè)goods頁(yè)面

js代碼

Page({data: {good_list: [1, 2, 3]},// 當(dāng)滑動(dòng)到底部還有100rpx時(shí)，就會(huì)觸發(fā)這個(gè)函數(shù)執(zhí)行---》發(fā)送請(qǐng)求獲取數(shù)據(jù)onReachBottom() {console.log('上拉了')// 發(fā)送請(qǐng)求獲取數(shù)據(jù)wx.request({url: 'http://127.0.0.1:8000/app01/random/',method:'GET',success:(res)=>{this.setData({good_list:this.data.good_list.concat(res.data)})}})},
})

###wxml####

<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

這樣的123不好看沒(méi)我們?cè)O(shè)置個(gè)樣式
###wxss###

view{height: 400rpx;display: flex;justify-content: center;align-items: center;}/* 奇數(shù)背景色是粉色 */
view:nth-child(odd){background-color: pink;
}/* 偶數(shù)背景色綠色 */
view:nth-child(even){background-color: rgb(17, 133, 88);
}

現(xiàn)在我們要實(shí)現(xiàn)，往上拉，拉到最底部時(shí)，顯示更多的數(shù)字
此時(shí)需要在goods.json文件中配置onReachBottomDistance

###json###

{"usingComponents": {},"onReachBottomDistance": 100
}

onReachBottomDistance的意思是，當(dāng)拉到距離底部距離多少rpx時(shí)開(kāi)始觸發(fā)加載更多

滑動(dòng)加載數(shù)據(jù)，在js代碼中是固定的函數(shù)名 onReachBottom

      // 當(dāng)滑動(dòng)到底部還有100rpx時(shí)，就會(huì)觸發(fā)這個(gè)函數(shù)執(zhí)行---》發(fā)送請(qǐng)求獲取數(shù)據(jù)onReachBottom() {console.log('下拉了')// 發(fā)送請(qǐng)求獲取數(shù)據(jù)wx.request({url: 'http://127.0.0.1:8000/random',method:'GET',success:(res)=>{this.setData({good_list:this.data.good_list.concat(res.data)})}})},

django后端代碼：
###url###

###視圖###

import randomdef random_view(request):l = []for i in range(3):l.append(random.randint(0, 99999))return JsonResponse(l,safe=False)  # 返回json格式，如果里面有列表，必須加safe=False

后端運(yùn)行

小程序上拉，顯示更多數(shù)據(jù)

2.下拉刷新

上面我們講到了下拉加載更多數(shù)據(jù)，如果我們想恢復(fù)到最初的默認(rèn)怎么辦，此時(shí)就用到了下拉刷新

###json中配置###

{"usingComponents": {},"onReachBottomDistance": 100,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle":"dark"
}

###wxml ###

<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

###js ###

// 下拉刷新-
onPullDownRefresh(){console.log('下拉了，刷新')// 只要下來(lái)，把數(shù)據(jù)恢復(fù)this.setData({good_list:[1,2,3]})// 下拉刷新后，loading效果回彈if(this.data.good_list.length==3){wx.stopPullDownRefresh()}
}

3.scroll-view實(shí)現(xiàn)上拉加載更多，下拉刷新

我們?cè)傩陆▊€(gè)頁(yè)面

重新建個(gè)tarbar

#####wxml####

<scroll-view 
class="scroll"
scroll-y  # 運(yùn)行y軸滑動(dòng)
lower-threshold="100" # 距離底部還有100px時(shí)，觸發(fā)事件
bindscrolltolower="handleGetData"# 事件處理函數(shù)refresher-enabled="true"        # 開(kāi)啟 下拉刷新
refresher-default-style="black" # 下拉默認(rèn)樣式
refresher-background="#f0f0f0"  # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉觸發(fā)事件
refresher-triggered="{{isRefresh}}" # 設(shè)置下拉回彈，false允許回彈，enable-back-to-top="true"  # 快速回到頂部，ios點(diǎn)頂部，安卓點(diǎn)tab
><view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>

###wxss###

.scroll{/* 100vh就是指元素的高度等于當(dāng)前瀏覽器的視窗高度,即瀏覽器內(nèi)部的可視區(qū)域的高度大小 */height: 100vh; background-color: grey;
}view{height: 400rpx;display: flex;justify-content: center;align-items: center;
}
/* 奇數(shù) */
view:nth-child(odd){background-color: pink;
}
/* 偶數(shù) */
view:nth-child(even){background-color: green;
}

效果：
下拉刷新

上拉加載更多