微信小程序开发之下拉刷新，上拉加载更多

先开看一下界面

大致如此的界面吧。 这个Demo使用了微信的几个Api和事件，我先列出来。

1.wx.request （获取远程服务器的数据，可以理解成$.ajax）

2. scroll-view的两个事件

2.1 bindscrolltolower（滑到页面底部时）

2.2 bindscroll (页面滑动时)

2.3 bindscrolltoupper (滑倒页面顶部时)

然后我们看代码，详细描述。

index.js

var url = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 20;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 获取数据的方法，具体怎么获取列表数据大家自行发挥var GetList = function(that){    that.setData({        hidden:false    });    wx.request({        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        },        success:function(res){            //console.info(that.data.list);            var list = that.data.list;            for(var i = 0; i < res.data.list.length; i++){                list.push(res.data.list[i]);            }            that.setData({                list : list            });            page ++;            that.setData({                hidden:true            });        }    });}Page({  data:{    hidden:true,    list:[],    scrollTop : 0,    scrollHeight:0  },  onLoad:function(){    //   这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值      var that = this;      wx.getSystemInfo({          success:function(res){              console.info(res.windowHeight);              that.setData({                  scrollHeight:res.windowHeight              });          }      });  },  onShow:function(){    //   在页面展示之后先获取一次数据    var that = this;    GetList(that);  },  bindDownLoad:function(){    //   该方法绑定了页面滑动到底部的事件      var that = this;      GetList(that);  },  scroll:function(event){    //   该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。     this.setData({         scrollTop : event.detail.scrollTop     });  },  refresh:function(event){    //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新      page = 0;      this.setData({          list : [],          scrollTop : 0      });      GetList(this)  }})

index.wxml

                                                    {{item.name}}                {{item.short_description}}                                        

更多微信小程序开发之 下拉刷新，上拉加载更多 相关文章请关注PHP中文网！