微信小程序實現(xiàn)列表刷新的實例詳解

更新時間：2016年11月02日 15:45:46 投稿：lqh

這篇文章主要介紹了微信小程序實現(xiàn)列表刷新的實例詳解的相關(guān)資料,這里提供了實現(xiàn)代碼及實現(xiàn)效果圖，需要的朋友可以參考下

微信小程序列表刷新：

微信小程序，最近自己學(xué)習(xí)微信小程序的知識，就想實現(xiàn)現(xiàn)在APP 那種列表刷新，下拉刷新，上拉加載等功能。

先開看一下界面

1.wx.request （獲取遠程服務(wù)器的數(shù)據(jù)，可以理解成$.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;


// 獲取數(shù)據(jù)的方法，具體怎么獲取列表數(shù)據(jù)大家自行發(fā)揮
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必須要設(shè)置高度才能監(jiān)聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       console.info(res.windowHeight);
       that.setData({
         scrollHeight:res.windowHeight
       });
     }
   });
 },
 onShow:function(){
  //  在頁面展示之后先獲取一次數(shù)據(jù)
  var that = this;
  GetList(that);
 },
 bindDownLoad:function(){
  //  該方法綁定了頁面滑動到底部的事件
   var that = this;
   GetList(that);
 },
 scroll:function(event){
  //  該方法綁定了頁面滾動時的事件，我這里記錄了當(dāng)前的position.y的值,為了請求數(shù)據(jù)之后把頁面定位到這里來。
   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>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: