微信小程序 绑定列表数据 分页

这篇文章主要介绍了微信小程序 实现列表刷新的实例详解的相关资料,这里提供了实现代码及实现效果图，需要的朋友可以参考下

微信小程序 列表刷新：

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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>

转自：http://www.jb51.net/article/96331.htm