微信小程序实现列表刷新的实例详解

微信小程序，最近自己学习微信小程序的知识，就想实现现在APP 那种列表刷新，下拉刷新，上拉加载等功能。

先开看一下界面

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中文网！