一、下拉刷新

1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新
2、页面配置:允许页面进行下拉刷新动作:

    {
         "enablePullDownRefresh": true
    }

3、使用的page属性:onPullDownRefresh: Function(){} 页面相关事件处理函数–监听用户下拉动作
4、实现示例:

    //刷新
    onRefresh(){
        //在当前页面显示导航条加载动画
        wx.showNavigationBarLoading(); 
        //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
        wx.showLoading({
          title: '刷新中...',
        })
        this.getData();
      },
    //网络请求,获取数据
    getData(){
    	wx.request({
            url: '',
            //网络请求执行完后将执行的动作
            complete(res){
                //隐藏loading 提示框
                wx.hideLoading();
                //隐藏导航条加载动画
                wx.hideNavigationBarLoading();
                //停止下拉刷新
                wx.stopPullDownRefresh();
      	  	}
    	})   
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        //调用刷新时将执行的方法
    	this.onRefresh();
    }

二、上拉加载

1、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。
2、使用的page属性:onReachBottom: Function(){} 页面上拉触底事件的处理函数
3、实现示例:列表分页加载

<view class="list" wx:for="{{dataList}}" wx:key="*this" >
    <view>编号: {{item.number}}</view>
    <view>位置: {{item.location}}</view>
 </view>
const app = getApp();
Page({
    /**
     * 页面的初始数据
     */
    data: {
        page:1,
        pageSize:20,
        totalRows:0,
        dataList: []
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
        this.getDataList()
    },

    getDataList: function() {
        var that = this;
        wx.showToast({
            icon: 'loading',
            duration: 30000,
            mask: true
        });
        const {
            page,
            pageSize,
            dataList
        } = that.data;
        let param = {
            page,
            pageSize
        }
        wx.request({
            url: app.sr_api.getMonthTaskList,
            header: app.getHead(),
            data: param,
            method: 'POST',
            success: function(res) {
                if (res.errMsg !== 'request:ok') {
                    that.upFail(res.errMsg)
                }
                if (res.data.status != 200) {
                    that.upFail(res.data.message)
                }
                if (res.data.status == 200) {
                    wx.hideToast({
                        success: (res) => {},
                    })
                    that.setData({
                        dataList: [...dataList,...res.data.data.result],
                        totalRows: res.data.data.totalRows
                    })
                }
            },
            fail: function(res) {
                wx.showToast({
                	title: '获取失败',
		            icon: 'error',
		            mask: true
		        });
            }
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        let {
            page = 1, totalRows = 0,
            dataList = [],
        } = this.data;
        // 判断数据是否加载完毕
        if (dataList.length < totalRows) {
            ++page;
            this.setData({
                page
            })
            this.getMonthTaskList();
        }
    }
})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐