- micro-channel applet on LAC upload onReachBottom

Code:

  // Pull bottom of the page event handler 
  onReachBottom (E) { 
    the console.log ( " bottom " ) // scroll to the page for performing the method 
    wx.showToast ({ 
      title: ' Loading ... ' , 
      icon: ' loading ' , 
      DURATION: 2000 
    }) 
    / * 
      here you need to perform additional data to request cycle like array 
    * / 
  }, 
  onPageScroll (E) { 
    the console.log (E) // scroll bar to scroll position (e.scrollTop ) calculated from the head 
  },

 

principle:

Raja upload more demand on this I believe should be applied quite widely, I said today that I think are two possible ways of Kazakhstan.

First, the first one should be the easiest one implementation, the document comes with a monitor api can scroll to the bottom of the page method ( onReachBottom ), " onPageScroll " method can monitor the page scroll position. (PS: page .json in 'onReachBottomDistance: number' default is 50, this distance can be set to perform much px bottom onReachBottom method, using a specific look at your needs.)
1. First prepare several boxes so that it exceeds the height of the generated page page scrolling bar, then prepare a specific loading animation to achieve the following:

// wxml: length of the array ARR is defined arbitrarily 4 only to the height of the support 
<View class = ' Warp ' > 
  <View WX: for = " {} {} ARR "  class = ' bg_cl ' > </ View> 
< / View> 
<-! loading animation -> 
<View class = ' bottom ' > 
  <View class = " loading " > 
        <text> </ text> 
        <text> </ text> 
        <text> </ text> 
        < text></text>
        <text></text>
  </view>
</view>
// wxss ========================================
.warp{
  display: flex;
  flex-flow: column;}
.bg_cl{
  width: 100%;
  flex: 1;
  height: 400rpx;
  background: pink;}
.bg_cl:nth-child(2),.bg_cl:nth-child(4){
  background: purple;}
.bottom{
  line-height: 50rpx;
  font-size: 24rpx;
  display: flex; align-items: center;
  justify-content: center;}

/*过渡动画  */
.loading{
    width: 148rpx;
    height: 44rpx;}
.loading text{
    display: inline-block;
    width: 20rpx;
    height:20rpx;
    margin-right: 5px;
    border-radius: 50%;
    background:#999;
    -webkit-animation: load 1.04s ease infinite;
}
.loading text:last-child{
    margin-right: 0px; 
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100%{
        opacity: 0.2;
        -webkit-transform: scale(.3);
    }
}
.loading text:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loading text:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loading text:nth-child(3){
    -webkit-animation-delay:0.39s; 
} 
.loading text: Nth -child ( . 4 ) {
     -webkit-Delay-Animation: 0 .52s; 
} 
.loading text: Nth -child ( . 5 ) {
     -webkit-Delay-Animation: 0 .65s; 
} 

// JS =============================================== ========== 
onReachBottom (E) { 
    the console.log ( " bottom " ) // scroll to the page for performing the method 
    wx.showToast ({ 
      title: ' loading ... ' , 
      icon: ' loading ' , 
      DURATION:2000 
    }) 
    / * 
      execute the requested data where you need to loop through the array like the append 
    * / 
  }, 
  onPageScroll (E) { 
    // the console.log (E) // scroll bar to scroll position (e.scrollTop) de novo portion counted 
  },

 

 

 

 

 

The second: can scroll-view assembly, Scroll-Y is true allowable vertical scrolling, need to set a fixed height when using scroll-view component. Component has a bindscrolltolower bottom / right side method. For details, see the official documentation (PS: using the component will have a scroll bar on the page, but page will also have a problem occurs at this time, you can set the page .json configuration file: "disableScroll": to true the whole page can not scroll up and down wxss equivalent to the page {overflow: hidden};)

<!-- scroll-view  -->
 <scroll-view  scroll-y='true' style="height:{{height}}px" bindscroll='scrollt' bindscrolltolower='scrollBottom'>
  <view class='warp'>
    <view wx:for="{{arr}}" class='bg_cl'></view>
  </view>
</scroll-view> 
==============wxss 延用上方就好了 下方是js'=================
the onLoad: function () {
     var that = the this 
    wx.getSystemInfo ({ 
      Success: RES => { 
        the console.log (RES) 
        the this .setData ({ 
          height: res.windowHeight // Get the height of the screen assigned to View-Scroll 
        }) 
      } 
    }) 
  }, 
  // scroll- View from the top of the scroll bar how many PX 
  scrollt (E) { 
    console.log (e.detail) 
  }, 
  // the scroll-View scroll in the end the Ministry trigger 
  scrollBottom (E) { 
    console.log ( " I the bottom scroll " )
   // add here your request methods like much here to do a repeat. 
  }

 

 

 

 

 

 

.