在小程序開發中使用下拉刷新和上拉加載非常多，比如常用的展示型首頁，而實現這個功能有兩種形式，第一種是使用 scroll-view 組件，第二種是不使用 scroll-view 組件而讓整個頁面刷新，那就分別都在此簡單分享下。

方法一

在 scroll-view 里設定 bindscrolltoupper 和 bindscrolltolower 監聽頁面滑動到頂部和底部，調用兩個方法然后分別根據自己業務邏輯處理即可。

詳情見 scroll-view 組件

直接上代碼

注意使用豎向滾動時，需要給 <scroll-view/> 一個固定高度才能監聽滾動事件，通過 WXSS 設置 height 。

index.wxml

<!--index.wxml--> <view><scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll"><view class="item" wx:for="{{list}}"><image class="img" src="{{item.pic_url}}"></image><view class="text"><text class="title">{{item.name}}</text><text class="description">{{item.short_description}}</text></view></view></scroll-view><view class="body-view"><loading hidden="{{hidden}}" bindchange="loadingChange">加載中...</loading></view> </view>

index.js

var url = "https://xxx"; var page = 1; var page_size = 5;// 請求數據 var loadMore = function (that) {that.setData({hidden: true});wx.request({url: url,data: {page: page,page_size: page_size,},header: {'content-type': 'application/json'},success: function (res) {var list = that.data.list ;for(var i = 0; i < res.data.data.length; i++){list.push(res.data.data[i]);}that.setData({list: list});page++;that.setData({hidden: false});}}); }Page({data: {hidden: true,list: [],scrollTop: 0,scrollHeight: 0},onLoad: function () {//注意 scroll-view 必須要設置高度才能監聽滾動事件，需要在頁面的onLoad事件中給scroll-view的高度賦值var that = this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight});}});loadMore(that);},//下拉加載bindDownLoad: function () {var that = this;loadMore(that);},scroll: function (event) {//該方法綁定了頁面滾動時的事件，這里記錄了當前的 position.y 的值,為了請求數據之后把頁面定位到這里來。this.setData({scrollTop: event.detail.scrollTop});},//上拉刷新topLoad: function (event) {var that = this;//數據刷新page = 0;this.setData({page: 1,list: [],scrollTop: 0});loadMore(that);} })

方法二

整個頁面的刷新，使用 onPullDownRefresh 和 onReachBottom 。但是在小程序里，用戶頂部下拉是默認禁止的，我們需要把他設置為啟用，在 app.json 中的設置對所有頁面有效，在單獨頁面設置則對當前頁面有效。

詳情見 Page 頁面

有人說設置完之后可以下拉，但是看不到圖標，需要再設置下拉 loading 樣式。

{"window":{"backgroundTextStyle": "dark","enablePullDownRefresh": true} }

直接上代碼

下拉刷新

// 下拉刷新 onPullDownRefresh: function () {// 顯示頂部刷新圖標 wx.showNavigationBarLoading();var that = this;wx.request({url: 'https://xxx',method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {that.setData({moment: res.data.data});// 設置數組元素 that.setData({moment: that.data.moment});// 隱藏導航欄加載框 wx.hideNavigationBarLoading();// 停止下拉動作 wx.stopPullDownRefresh();}})},

上拉加載更多

//上拉加載onReachBottom: function () {var that = this;// 顯示加載圖標 wx.showLoading({title: '加載中...',})page++;;wx.request({url: 'https://xxx/'，method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {// 回調函數 var moment_list = that.data.moment;for (var i = 0; i < res.data.data.length; i++) {moment_list.push(res.data.data[i]);}// 設置數據 that.setData({moment: that.data.moment})// 隱藏加載框 wx.hideLoading();}})},

參考以上例子就可以下拉刷新、上拉加載， 示例僅提供一個思路，具體的實現需要開發者根據自己項目來定。

碼字不易，轉載請注明出處。

總結

以上是生活随笔為你收集整理的vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载的全部內容，希望文章能夠幫你解決所遇到的問題。

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