android微信小程序自动填表_微信小程序 实现列表刷新的实例详解

微信小程序 列表刷新：

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

class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">

{{item.name}}

{{item.short_description}}

加载中...

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