微信小程序新手教程之怎么实现下拉刷新

　　微信小程序新手教程之怎么实现下拉刷新，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

如何在微信小程序里面实现下拉刷新，上拉加载更多

先看一下界面

 大致如此的界面吧。 这个Demo使用了微信的几个Api和事件，我先列出来。

1.wx.request （获取远程服务器的数据，可以理解成$.ajax）

2. scroll-view的两个事件

   2.1 bindscrolltolower（滑到页面底部时）

   2.2 bindscroll (页面滑动时)

   2.3 bindscrolltoupper (滑倒页面顶部时)

然后我们看代码，详细描述。

index.js

#FormatImgID_2#

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>