小程序滑动事件加载数据列用了scroll-view滚动视图区域。先来看看官方的说明

 1 
属性名  类型  默认值  说明
 2 
scroll-x  Boolean  false  允许横向滚动
 3 
scroll-y  Boolean  false  允许纵向滚动
 4 
upper-threshold  Number  50  距顶部/左边多远时（单位px），触发 scrolltoupper 事件
 5 
lower-threshold  Number  50  距底部/右边多远时（单位px），触发 scrolltolower 事件
 6 
scroll-top  Number   设置竖向滚动条位置
 7 
scroll-left  Number   设置横向滚动条位置
 8 
scroll-into-view  String   值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
 9 
scroll-with-animation  Boolean  false  在设置滚动条位置时使用动画过渡
 10 
enable-back-to-top  Boolean  false  iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
 11 
bindscrolltoupper  EventHandle   滚动到顶部/左边，会触发 scrolltoupper 事件
 12 
bindscrolltolower  EventHandle   滚动到底部/右边，会触发 scrolltolower 事件
 13 
bindscroll  EventHandle   滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

我用的是bindscrolltolower触发事件lower

 1 
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"   
 2 
        class="list" bindscrolltolower="lower" >  
 3 
   <block wx:for="{{specialisdata}}" wx:key="item">
 4 
  <navigator url="../specialistxq/specialistxq?id={{item.id}}&title={{item.name}}-{{item.position}}">
 5 
    <view class="item">
 6 
     <image src="{{ requestUrl}}{{item.picurl}}" class="slide-image"  mode='widthFix'/>
 7 
      <view class="meta">
 8 
        <text class="title">{{item.name}}        {{item.position}}   </text>
 9 
        <view class="artists">{{item.janjie}}...  </view>
 10 
         
 11 
      </view>
 12 
      <view class="navigator-arrow"></view>
 13 
    </view>
 14 
  </navigator>
 15 
 </block>
 16 
 </scroll-view>  
 17 

 18 
  <view class="body-view">  
 19 
        <loading hidden="{{hidden}}" bindchange="loadingChange">  
 20 
            加载中...  
 21 
        </loading>  
 22 
    </view>  
 23 

js代码：

 1 
var i=1;
 2 
var arrlist=[];
 3 
Page({
 4 

 5 
  onReady() {
 6 

 7 
    var that = this;
 8 
    wx.request({
 9 
      url:  'http://127.0.0.1/news/list//pageSize/8/pageNumber/1', //仅为示例，并非真实的接口地址
 10 
      data: {},
 11 
      header: {
 12 
        'content-type': 'application/json' // 默认值
 13 
      },
 14 
      success: function (res) {
 15 
     
 16 
    
 17 
     
 18 
          arrlist.push(res.data.data)//追加
 19 
    
 20 
       
 21 
        console.log(arrlist);
 22 
        
 23 
        that.setData({
 24 
          newsdata: arrlist[0],
 25 
         
 26 
        
 27 
        })
 28 

 29 
        wx.getSystemInfo({
 30 
          success: function (res) {
 31 
           // console.info(res.windowHeight);
 32 
            that.setData({
 33 
              scrollHeight: res.windowHeight
 34 
            });
 35 
          }
 36 
        });  
 37 
        that.setData({
 38 
          hidden: true
 39 
        });  
 40 

 41 

 42 
      }
 43 

 44 

 45 
    });
 46 
 
 47 

 48 
  }, data: {
 49 
    hidden: false,
 50 
    scrollTop: 0,
 51 
    scrollHeight: 0
 52 
  }, lower: function (e) {
 53 
   i++;
 54 
   console.log(i);
 55 
    var that = this;
 56 
 
 57 
    wx.request({
 58 
      url: 'http://127.0.0.1/news/list/pageSize/8/pageNumber/'+i, //仅为示例，并非真实的接口地址
 59 
      data: {},
 60 
      header: {
 61 
        'content-type': 'application/json' // 默认值
 62 
      },
 63 
      success: function (res) {
 64 
        if (res.data.data==""){
 65 
          wx.showToast({
 66 
            title: '没有数据了',
 67 
            icon: 'loading',
 68 
            duration: 1000
 69 
          })
 70 
          return;
 71 
        }
 72 
        
 73 
     
 74 
        for (var i = 0; i < res.data.data.length; i++) {
 75 
       
 76 
          arrlist[0].push(res.data.data[i])//追加
 77 
        }  
 78 
     
 79 
        that.setData({
 80 
          newsdata: arrlist[0],
 81 

 82 

 83 
        })
 84 

 85 
        console.log(arrlist); 
 86 
     
 87 
        wx.getSystemInfo({
 88 
          success: function (res) {
 89 
            console.info(res.windowHeight);
 90 
            that.setData({
 91 
              scrollHeight: res.windowHeight
 92 
            });
 93 
          }
 94 
        });
 95 
        that.setData({
 96 
          hidden: true
 97 
        });  
 98 
      
 99 
        //  wx.setNavigationBarTitle({ title: res.data.data.unitname })
 100 

 101