先开看一下界面
大致如此的界面吧。 这个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
<view class="container"> <scroll-view scroll-top="{{scrolltop}}" scroll-y="true" style="height:{{scrollheight}}px;" class="list" bindscrolltolower="binddownload" bindscroll="scroll" bindscrolltoupper="refresh"> <view class="item" wx:for="{{list}}"> <image class="img" src="{{item.pic_url}}"></image> <view class="text"> <text class="title">{{item.name}}</text> <text class="description">{{item.short_description}}</text> </view> </view> </scroll-view> <view class="body-view"> <loading hidden="{{hidden}}" bindchange="loadingchange"> 加载中... </loading> </view></view>
更多微信小程序开发之 下拉刷新，上拉加载更多 。