The example of realizing list refresh with micro-letter applet _android

Micro-Letter Applet list Refresh:

Micro-Letter Applet, the recent study of their own micro-trust program knowledge, want to realize the current app that list refresh, Drop-down refresh, pull loading and other functions.

First look at the interface

1.wx.request (Gets the data from the remote server, can be understood as $.ajax)

2. Two events in Scroll-view

2.1 Bindscrolltolower (when sliding to bottom of page)

2.2 Bindscroll (when page slides)

2.3 Bindscrolltoupper (when sliding the top of the page)

Then we look at the code and describe it in detail.

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;
  The way to get the data, how to get the list data, everyone play 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 () {//here to be very careful, micro-letter Scro Ll-view you must set a height to listen for scrolling events, so you need to assign the Scroll-view height to the OnLoad event in the page. Var that = this;
       Wx.getsysteminfo ({success:function (res) {console.info (res.windowheight);
     That.setdata ({scrollHeight:res.windowHeight});
 }
   });
  Onshow:function () {//get data var that = This after the page is displayed;
 GetList (that);
   }, Binddownload:function () {//The method binds the page to slide to the bottom of the event var that = this;
 GetList (that);
   }, Scroll:function (event) {//This method binds the events when the page scrolls, where I record the current POSITION.Y value and position the page here to request the data.
 This.setdata ({scrollTop:event.detail.scrollTop});
   Refresh:function (Event) {//This method binds the page to slide to the top of the event, and then does a pull refresh 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 ...
    </loading>
  </view>
</view>

Thank you for reading, I hope to help you, thank you for your support for this site!