How to enable pull-down in uniapp

Uniapp method to enable pull-down: 1. Enable pull-down refresh in pages.json; 2. Throw an additional set of data into the array each time you pull up, with statements such as "onReachBottom(){let that =this...}".

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free): uni-app development tutorial

uniapp implements pull-up loading and pull-down refresh

Pull-down refresh onPullDownRefresh

You need to enable pull-down refresh in pages.json first

//在pages.json中找到需要开启的页面. 在style中输入
"enablePullDownRefresh": true,

After turning on pull-down refresh, the pull-down animation will appear on the page corresponding to the pull-down, but the animation will not Automatically close, so close manually

onPullDownRefresh () {
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
        uni.stopPullDownRefresh() 
    }, 1000)
},

Pull-up loading onReachBottom

Throw an extra set of data into the array every time you pull up

const SIZE = 10
data(){
return {
size: 10,
current: 1
}
}
//上拉加载函数
onReachBottom(){
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
        that.getData()
    },1000)
}

The above is the detailed content of How to enable pull-down in uniapp. For more information, please follow other related articles on the PHP Chinese website!