微信小程序之上拉加载和下拉刷新
微信小程序,最近自己学习微信小程序的知识,就想实现现在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>