微信小程序实现上拉加载及下拉刷新效果

结构（WXML）

<!--index.wxml-->  
<view class="container" style="padding:0rpx">  
  <!--垂直滚动，这里必须设置高度-->  
    <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}}" wx:key="{{item}}">  
            <image class="img" src="{{item.img}}"></image>  
            <view class="text">  
                <text class="title">{{item.title}}</text>  
                <text class="description">{{item.city}}</text>  
            </view>  
        </view>  
    </scroll-view>  
    <view class="body-view">  
        <loading hidden="{{hidden}}" bindchange="loadingChange">  
            加载中...  
        </loading>  
    </view>  
</view>

样式（WXSS）

}  }  .description {    font-size: 26rpx;    line-height: 15rpx;    font-size: 30rpx;    display: block;    margin: 30rpx auto;    margin-right: 20rpx;    float: left;  }  .title {  .item .img {    width: 430rpx;    height:100%;
/**index.wxss**/
scroll-view{
  height: 100%;
}
.userinfo {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
.userinfo-avatar {  


image 
无结果

/pages/index/index.wxss 

js

//index.js
//获取应用实例
const app = getApp();
var API = require('../../utils/api.js')
var hadListPage = false;
//var url = "http://www.imooc.com/course/ajaxlist"
var url = "";
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;
//获取上拉的加载数据
var pageList = function(that){
  //数据请求完弹出提示不在请求服务器  hadListPage =false;
  if (hadListPage != false) {
    wx.showToast({
      title: '到底了',
    });
    return false;
  }
  显示提示信息
  that.setData({
    hidden: false
  })
  //后台交互
  /*wx.request({
      method: "POST",
      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  
      },
      header:{
       "content-type":"application/json"
      },
      success:function(res){
        console.info(res.data.list);
        var list = res.data.list;
        for (var i = 0; i < res.data.list.length;i++){
          list.push(res.data.list[i]);
        }

        //pages++这里做处理，原理就是数据请求完了后还在请求的问题bug
        if(res.header["X-Pagination-Page-Count"]==res.header["X-Pagination-Current-Page"]){
            hadListPage=res.header["X-Pagination-Current-Page"]
        }else{
          page++
        }
        that.setData({
          list:list
        })
        that.setData({
          hidden:true
        })
      }
    })*/
  // 使用 Mock
  API.ajax('', function (res) {
    //这里既可以获取模拟的res
    that.setData({
      list: res.data
    });
    //隐藏提示信息
    that.setData({
      hidden: true
    });
  });
  //请求出来的 总数
  console.log(that.data.list)
};
Page({
  data: {
    hidden: true,
    list:[],
    scrollHeight:0,
    scrollTop :0
  },
  //下拉刷新
  topLoad:function(){
  
   hadListPage=false;
    //page = 0;
    this.setData({
     list:[],
     scrollTop: 0
  })
    //下拉刷新   就是从新执行以下onLoad函数
    pageList(this);
    //下拉结束后关闭刷新
    console.log("下拉刷新");
    wx.stopPullDownRefresh();
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    pageList(that);
   },
   //滚动监听事件
   
   scroll:function(e){
    this.setData({
      scrollTop: e.detail.scrollTop
    })
   },
   //滚动到底部监听事件
   //上拉加载
   bindDownLoad:function (that){
      var that = this;
      pageList(that);
      console.log("上拉加载");
   },
  onReady:function(){
  }  
})

1、js目前效果是模拟的数据注释的部分是后台交互的真实数据。（根据自己的需求改改就好）

2、这里用的了微信小程序刷新的第一种方法（

bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"

）另外一种微信小程序提供的 onPullDownRefresh和onReachBottom这个差不多。