微信小程序之下拉加載和上拉刷新

微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法

方法一：onPullDownRefresh和onReachBottom方法實(shí)現(xiàn)小程序下拉加載和上拉刷新

首先要在json文件里設(shè)置window屬性

設(shè)置js里onPullDownRefresh和onReachBottom方法

下拉加載說(shuō)明：

當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。

onPullDownRefresh(){console.log('--------下拉刷新-------')wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載wx.request({url: 'https://URL',data: {},method: 'GET',// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 設(shè)置請(qǐng)求的 headersuccess: function(res){// success},fail: function() {// fail},complete: function() {// completewx.hideNavigationBarLoading() //完成停止加載wx.stopPullDownRefresh() //停止下拉刷新}})

方法二：

在scroll-view里設(shè)定bindscrolltoupper和bindscrolltolower實(shí)現(xiàn)微信小程序下拉

index.wxml

<!--index.wxml--><view class="container" style="padding:0rpx"><!--垂直滾動(dòng)，這里必須設(shè)置高度--><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 = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 5;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 請(qǐng)求數(shù)據(jù)var loadMore = function(that){that.setData({hidden:false});wx.request({url:url,data:{page : page,page_size : page_size,sort : sort,is_easy : is_easy,lange_id : lange_id,pos_id : pos_id,unlearn : unlearn},success:function(res){//console.info(that.data.list);var list = that.data.list;for(var i = 0; i < res.data.list.length; i++){list.push(res.data.list[i]);}that.setData({list : list});page ++;that.setData({hidden:true});}});}Page({data:{hidden:true,list:[],scrollTop : 0,scrollHeight:0},onLoad:function(){// 這里要注意，微信的scroll-view必須要設(shè)置高度才能監(jiān)聽(tīng)滾動(dòng)事件，所以，需要在頁(yè)面的onLoad事件中給scroll-view的高度賦值var that = this;wx.getSystemInfo({success:function(res){that.setData({scrollHeight:res.windowHeight});}});loadMore(that);},//頁(yè)面滑動(dòng)到底部bindDownLoad:function(){ var that = this;loadMore(that);console.log("lower");},scroll:function(event){//該方法綁定了頁(yè)面滾動(dòng)時(shí)的事件，我這里記錄了當(dāng)前的position.y的值,為了請(qǐng)求數(shù)據(jù)之后把頁(yè)面定位到這里來(lái)。this.setData({scrollTop : event.detail.scrollTop});},topLoad:function(event){// 該方法綁定了頁(yè)面滑動(dòng)到頂部的事件，然后做上拉刷新page = 0;this.setData({list : [],scrollTop : 0});loadMore(this);console.log("lower");}})

index.wxss

/**index.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-nickname {color: #aaa;}.usermotto {margin-top: 200px;}/**/scroll-view {width: 100%;}.item {width: 90%;height: 300rpx;margin: 20rpx auto;background: brown;overflow: hidden;}.item .img {width: 430rpx;margin-right: 20rpx;float: left;}.title {font-size: 30rpx;display: block;margin: 30rpx auto;}.description {font-size: 26rpx;line-height: 15rpx;}

總結(jié)

以上是生活随笔為你收集整理的微信小程序之下拉加载和上拉刷新的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。