小程序实现上拉加载下拉刷新

效果图

代码

wxml

<scroll-view scroll-y style="height:100vh;"
bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view wx:for="{{list1}}" wx:key="id" class="main">
        <view>{{item.ansCont}}</view>
        <view>{{item.id}}</view>
        <image src="{{item.pic}}"></image>
    </view>
</scroll-view>

js

var util = require('../../../utils/server'),
        header = util.reqHeader()
Page({

        /**
         * 页面的初始数据
         */
        data: {
                pageNum: 1,
                list1: []
        },
        onLoad: function (options) {
                var that = this
                var keyWord = ''
                var pageNum = that.data.pageNum
                var pageSize = 10
                wx.showLoading({
                        title: '加载中',
                        icon: 'loading',
                        duration: 2000
                })
                util.sendRrquest('/sy/qa/getQaList?pageSize=' +
                                pageSize +
                                '&pageNum=' +
                                pageNum +
                                '&keyWord=' +
                                keyWord,
                                'POST',
                                'data', header)
                        .then(function (res) {
                                wx.hideLoading()
                                if (res.data.data.list.length) {
                                        let data = [...that.data.list1,...res.data.data.list]//这个是把请求刷新下拉的值存起来 要不然会不显示你刷新过得数据
                                        that.setData({
                                                list1: data
                                        })
                                } else {
                                        var num = that.data.pageNum - 1
                                        that.setData({
                                                pageNum: num
                                        })
                                        wx.showToast({
                                                title: '已经到底了',
                                                icon: 'success',
                                                duration: 2000
                                        })
                                }

                        }, function (error) {
                                var num = that.data.pageNum - 1
                                that.setData({
                                  pageNum: num
                                })
                        })
        },
         //页面滑动到底部
        bindDownLoad:function(){ 
                var that = this
                var num = that.data.pageNum + 1
                that.setData({
                  pageNum: num
                })
                console.log(that.data.pageNum)
                that.onLoad() 
        },
})