微信小程序 列表刷新:

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

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

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册