Two implementation methods of WeChat applet pull-down loading and pull-up refresh
Method 1: onPullDownRefresh and onReachBottom methods implement drop-down loading and pull-up refresh of applet
First set the window property in the json file
Attributes | Types of | describe |
enablePullDownRefresh | Boolean | Whether to enable pull-down refresh, see page-related event handlers for details. |
Set onPullDownRefresh and onReachBottom methods in js
Attributes | Types of | describe |
onPullDownRefresh | function | Page-related event handlers - listen for user pull-down actions |
onReachBottom | function | The handler for the bottom event triggered by page pull up |
Drop down loading instructions:
When the data refresh is processed, wx.stopPullDownRefresh can stop the pull-down refresh of the current page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Method Two:
Set bindscrolltoupper and bindscrolltolower in scroll-view to realize WeChat applet drop-down
Attributes | Types of | describe |
bindscrolltoupper | EventHandle | Scroll to the top/left, the scrolltoupper event is fired |
bindscrolltolower | EventHandle | Scroll to the bottom/right, the scrolltolower event will be triggered |
index.wxml
1 <!--index.wxml--> 2 <view class="container" style="padding:0rpx"> 3 <!-- Vertical scrolling, the height must be set here--> 4 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 5 class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll"> 6 <view class="item" wx:for="{{list}}"> 7 <image class="img" src="{{item.pic_url}}"></image> 8 <view class="text"> 9 <text class="title">{{item.name}}</text> 10 <text class="description">{{item.short_description}}</text> 11 </view> 12 </view> 13 </scroll-view> 14 <view class="body-view"> 15 <loading hidden="{{hidden}}" bindchange="loadingChange"> 16 加载中... 17 </loading> 18 </view> 19 </view>
index.js
1 var url = "http://www.imooc.com/course/ajaxlist"; 2 var page =0; 3 var page_size = 5; 4 var sort = "last"; 5 var is_easy = 0; 6 var lange_id = 0; 7 var pos_id = 0; 8 var unlearn = 0; 9 10 11 // 请求数据 12 var loadMore = function(that){ 13 that.setData({ 14 hidden:false 15 }); 16 wx.request({ 17 url:url, 18 data:{ 19 page : page, 20 page_size : page_size, 21 sort : sort, 22 is_easy : is_easy, 23 lange_id : lange_id, 24 pos_id : pos_id, 25 unlearn : unlearn 26 }, 27 success:function(res){ 28 //console.info(that.data.list); 29 var list = that.data.list; 30 for(var i = 0; i < res.data.list.length; i++){ 31 list.push(res.data.list[i]); 32 } 33 that.setData({ 34 list : list 35 }); 36 page ++; 37 that.setData({ 38 hidden:true 39 }); 40 } 41 }); 42 } 43 Page({ 44 data:{ 45 hidden:true, 46 list:[], 47 scrollTop : 0, 48 scrollHeight:0 49 }, 50 onLoad:function(){ 51 // 这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值 52 var that = this; 53 wx.getSystemInfo({ 54 success:function(res){ 55 that.setData({ 56 scrollHeight:res.windowHeight 57 }); 58 } 59 }); 60 loadMore(that); 61 }, 62 //页面滑动到底部 63 bindDownLoad:function(){ 64 var that = this; 65 loadMore(that); 66 console.log("lower"); 67 }, 68 scroll:function(event){ 69 //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。 70 this.setData({ 71 scrollTop : event.detail.scrollTop 72 }); 73 }, 74 topLoad:function(event){ 75 // 该方法绑定了页面滑动到顶部的事件,然后做上拉刷新 76 page = 0; 77 this.setData({ 78 list : [], 79 scrollTop : 0 80 }); 81 loadMore(this); 82 console.log("lower"); 83 } 84 })
参考: https://www.cnblogs.com/simba-lkj/p/6274232.html