uniapp 下拉刷新的学习

下拉刷新的学习

在生命周期函数里还有一个onPullDownRefresh

函数名	说明	平台差异说明	最低版本
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例

如何触发下拉刷新

• 第一种:globalStyle全局配置

  "globalStyle": {
  		"navigationBarTextStyle": "white",
  		"navigationBarTitleText": "我的应用",
  		"navigationBarBackgroundColor": "#EEDC82",
  		"backgroundColor": "#87CEFF",
  		"enablePullDownRefresh":true,
  		"backgroundTextStyle":"light"
  	},
  

• 第二种，页面配置

  {
  	"path":"pages/list/list",
  	"style":{
  		"enablePullDownRefresh":true
  	}
  }
  

onPullDownRefresh

onPullDownRefresh(){
	console.log('触发了下拉刷新')
}

可以逻辑(这里就更新列表数据为例)

onPullDownRefresh(){
	console.log('触发了下拉刷新')
    this.list = ['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO','SPRINGBOOT']
}

但是有一个问题数据一下子就刷新了但是还是在加载，这里有个方法:uni.stopPulldownrefresh(停止当前页面下拉刷新。)

onPullDownRefresh(){
	console.log('触发了下拉刷新')
    this.list = ['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO','SPRINGBOOT']
    uni.stopPullDownRefresh()
}

这样一下子就没有了

你可以考虑一个延时来查看效果

onPullDownRefresh(){
	console.log('触发了下拉刷新')
    setTimeout(()=>{
                this.list = ['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO','SPRINGBOOT']
                uni.stopPullDownRefresh()
            },2000)
}

还有另外一种开启下拉刷新的方法:uni.startpulldownrefresh