WeChat mini program development: pull down to refresh, pull up to load more-Mini Program Development-php.cn

WeChat mini program development: pull down to refresh, pull up to load more

高洛峰

Release： 2017-02-16 10:15:40

Original

2117 people have browsed it

This article records how to implement pull-down to refresh and pull-up to load more in the WeChat applet

First open the interface and take a look

微信小程序开发之下拉刷新，上拉加载更多

The interface is roughly like this. This Demo uses several APIs and events of WeChat. I will list them first.

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

2. Two events of scroll-view

2.1 bindscrolltolower (slide When reaching the bottom of the page)

2.2 bindscroll (when the page slides)

2.3 bindscrolltoupper (when it slides to the top of the page)

Then let’s 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;// 获取数据的方法，具体怎么获取列表数据大家自行发挥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)
  }
})

Copy after login

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>

Copy after login

For more WeChat mini-program development, pull down to refresh, pull up to load more. For related articles, please pay attention to the PHP Chinese website!