微信小程序下拉刷新

wxml:

<view wx:if="{{items}}">

<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" style="height: {{windowHeight}}px">
    <view wx:for="{{items}}">
        <view class="item">
            <view class="item-top">
                <view class="avatar" wx:if="{{item.avatar}}">
                    <image mode="aspectFill" src="{{'http://uerb.net/'+item.avatar}}"></image>
                </view>
                <view class="avatar" wx:else><image mode="aspectFill" src="../img/default_img.png"></image></view>
                <view class="item-username">
                    <text>{{item.username}}{{item.jobname}}</text>
                </view>
                <view class="item-time">{{item.adddate}}</view>
            </view>
        </view>    
    </view>
    <view wx:if="{{hasMore}}">
        <view wx:if="{{nomore}}" class="tips">
            <text>没有更多内容了</text>
        </view>
        <view wx:else class="tips">
            <image src="../img/loading.gif" mode="aspectFill"/>
            <text>玩了命的加载中...</text>
        </view>
    </view>
</scroll-view>

<loading hidden="{{loading}}">加载中...</loading>

js:

Page({
data: {
windowHeight:"",//屏幕高
page:1,
totalPage:"",//总页数
nomore:false,//加载完所有信息显示
hasMore:true//加载时显示
},
// 加载
onLoad: function (e) {
console.log(this.data.page);
        this.getDataFromServer(this.data.page);
    },
    // 读取屏幕高度，赋值给scroll-view
    onShow: function( e ) {
wx.getSystemInfo( {
        success: ( res ) => {
this.setData( {
windowHeight: res.windowHeight
})
        }
})
},
// 上拉加载更多
    lower: function( e ) {
    var page = this.data.page+1;
    var nomore = this.data.nomore;
        if(page > this.data.totalPage){
        page = this.data.totalPage;
        nomore =true;
        }
        this.setData( {
          page: page,
          nomore:nomore
        })
        this.getDataFromServer( page );
        console.log( "上拉加载更多...." + page);
    },
    // 下拉返回
    upper: function( e ) {
    var page = this.data.page-1;
        
        if(page < 1){
        page = 1;
        }
        this.setData( {
          page: page
        })
        this.getDataFromServer( page );
        console.log( "下拉返回上页...." + page)
    },
    //获取网络数据的方法
    getDataFromServer: function (page) {
    console.log(page,this.data.totalPage);
        if(this.data.totalPage &&page > this.data.totalPage){
            page = this.data.totalPage;
        }
        var that = this;
        that.setData({
            loading: false,
            hasMore: true
        }),
        wx.request({
            url: 'url?p/'+page,
            data: {
                size: 10,
                parentsid: wx.getStorageSync('parentsid'),
                nurseryid: wx.getStorageSync('nurseryid'),
                classid: wx.getStorageSync('classid'),
                childid: wx.getStorageSync('childid')
            },
            header: {
                'Content-Type': 'application/json'
            },
            success:function(res) {
                if(res.statusCode = 200){
                    var items = res.data.dynamiclist;
                    that.setData({
                        items: items,
                        totalPage: res.data.totalPage,
                        loading: true, 
                        hasMore: false
                    });
                }else{
                    console.log("服务器异常");
                }
            }
        })
    }
})

wxss:

/*提示*/
.tips {
    font-size: 28rpx;
    text-align: center;
    padding: 50rpx;
    color: #ccc;
}
.tips image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}


.tips image,
.tips text {
    vertical-align: middle;
}