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

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

微信小程序 列表刷新：

          微信小程序，最近自己学习微信小程序的知识，就想实现现在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

<vIEw >  <scroll-vIEw scroll-top="{{scrolltop}}" scroll-y="true"       bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">    <vIEw  wx:for="{{List}}">      <image  src="{{item.pic_url}}"></image>      <vIEw >        <text >{{item.name}}</text>        <text >{{item.short_description}}</text>      </vIEw>    </vIEw>  </scroll-vIEw>  <vIEw >    <loading hIDden="{{hIDden}}" bindchange="loadingChange">      加载中...    </loading>  </vIEw></vIEw>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

总结

以上是内存溢出为你收集整理的微信小程序 实现列表刷新的实例详解全部内容，希望文章能够帮你解决微信小程序 实现列表刷新的实例详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。