微信小程序 scroll-view组件实现列表页实例代码

 {
  "text": "列表",
  "pagePath": "pages/allJoke/allJoke",
  "iconPath": "images/note.png",
  "selectedIconPath": "images/noteHL.png"
 },

{
 "navigationBarTitleText": "笑话集锦",
 "enablePullDownRefresh": true
}

<view>
 <view>
 <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll" bindscrolltolower="loadMore">
  <view class="block" wx:for="{{listLi}}" wx:for-item="item">
  <text>{{item.text}}</text>
  </view> 
 </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">⇧</view>
</view>

.block {
 border: 8px solid #71b471;
 margin: 20rpx 20rpx;
 padding: 10rpx;
 background-color: #fff;
 border-radius: 20rpx;
 text-align: center;
}
.top {
 width: 100rpx;
 height: 100rpx;
 line-height: 100rpx;
 background-color: #fff;
 position: fixed;
 bottom: 40rpx;
 right: 20rpx;
 text-align: center;
 font-size: 50rpx;
 opacity: .8;
 border-radius: 50%;
 border: 1px solid #fff; 
}

Page({
 data:{
 listLi:[],
 page:1,
 scrollTop:0,
 done: false,
 hidden: true
 },
 onLoad:function(options){
 this.getList(1);
 },

 onPullDownRefresh: function(){
 wx.showToast({
  title: '加载中',
  icon: 'loading'
 });
 this.getList(1,true);
 },

 getList: function(page, stopPull){
 var that = this
 wx.request({
  url: 'https://wechat.sparklog.com/jokes',
  data: {
  page: page,
  per: '20'
  },
  method: 'GET', 
  success: function(res){
  if(page===1){
   that.setData({
   page: page+1,
   listLi: res.data,
   done: false
   })
   if(stopPull){
   wx.stopPullDownRefresh()   
   }
  }else{
   if(res.data<20){
   that.setData({
    page: page+1,
    listLi: that.data.listLi.concat(res.data),
    done: true
   }) 
   }else{
   that.setData({
    page: page+1,
    listLi: that.data.listLi.concat(res.data)
   }) 
   } 
  }
  },
 })
 },

 loadMore: function(){
 var done = this.data.done;
 if(done){
  return
 }else{
  wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 500
  });
  var page = this.data.page;
  this.getList(page)
 }
 },

 scrll: function(e){
 var scrollTop = e.detail.scrollTop
 if(scrollTop>600){
  this.setData({
  scrollTop: 1,
  hidden: false  
  })
 }else{
  this.setData({
  scrollTop: 1,
  hidden: true 
  });
 }
 },

 goTop: function(){
 this.setData({
  scrollTop:0,
  hidden: true 
 })
 }
})