uniapp如何开启上下拉

193 阅读 0 评论 128 点赞

我是靠谱客的博主爱听歌豌豆，这篇文章主要介绍uniapp如何开启上下拉，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。

推荐（免费）：uni-app开发教程

uniapp实现上拉加载和下拉刷新

下拉刷新onPullDownRefresh

需要先在pages.json中开启下拉刷新

复制代码//在pages.json中找到需要开启的页面. 在style中输入
"enablePullDownRefresh": true,1
2
//在pages.json中找到需要开启的页面. 在style中输入
"enablePullDownRefresh": true,
登录后复制

开启下拉刷新之后, 下拉对应的页面就会出现下拉的动画, 但是动画不会自动关闭, 所以手动关闭

复制代码onPullDownRefresh () {
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
        uni.stopPullDownRefresh() 
    }, 1000)
},1
2
3
4
5
6
7
8
9
10
11
onPullDownRefresh () {
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
        uni.stopPullDownRefresh() 
    }, 1000)
},
登录后复制

上拉加载 onReachBottom

每次上拉时往数组中多扔一组数据

复制代码const SIZE = 10
data(){
return {
size: 10,
current: 1
}
}
//上拉加载函数
onReachBottom(){
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
        that.getData()
    },1000)
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const SIZE = 10
data(){
return {
size: 10,
current: 1
}
}
//上拉加载函数
onReachBottom(){
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
        that.getData()
    },1000)
}
登录后复制