微信小程序 实现列表刷新的实例详解
微信小程序 实现列表刷新的实例详解
发布时间:2016-12-28 来源:查字典编辑
摘要:微信小程序列表刷新:微信小程序,最近自己学习微信小程序的知识,就想实现现在APP那种列表刷新,下拉刷新,上拉加载等功能。先开看一下界面1.w...

微信小程序 列表刷新:

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

先开看一下界面

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

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

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>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类