uniapp使用onPullDownRefresh实现页面下拉刷新
uniapp使用onPullDownRefresh实现页面下拉刷新
·
这是在pages.json里 设置的全局下拉刷新效果 不推荐使用 一般用户都是刷新单个页面
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"enablePullDownRefresh":true //实现全局下拉刷新效果
}
一 onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数(和date,onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在
pages.json
里,找到的当前需要实现下拉效果页面的pages节点,并在style
选项中开启enablePullDownRefresh
- 当处理完数据刷新后,
uni.stopPullDownRefresh
可以停止当前页面的下拉刷新。
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "当前页面标题",
"enablePullDownRefresh":true //实现下拉刷新样式
}
}
<script>
export default {
data() {
return {
title: 'hello',
list:['你好!','下拉','就可','刷新我']
}
},
onPullDownRefresh(){
//刷新后的效果
this.list = ['你好!','我','已','刷新了']
uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
},
onLoad() {
},
methods: {
}
}
</script>
数据较少的情况下 刷新效果可能比较快 这时可以加个延迟效果 如延迟2s
<script>
export default {
data() {
return {
title: 'hello',
list:['你好!','下拉','就可','刷新我']
}
},
onPullDownRefresh(){
//this.list = ['你好!','我','已','刷新了']
setTimeout(()=>{
this.list = ['你好!','我','已','刷新了']
uni.stopPullDownRefresh()
},2000)
},
onLoad() {
},
methods: {
}
}
</script>
二 通过uni.startPullDownRefresh()方法
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致
例 给button按钮做一个点击之后刷新效果
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<!-- v-for循环 把数据渲染出来 -->
<view v-for="item in list">
{{item}}
</view>
<button @click="pullDown">点我刷新</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'hello',
list:['你好!','下拉','就可','刷新我']
}
},
onPullDownRefresh(){
//刷新后的效果
//this.list = ['你好!','我','已','刷新了']
setTimeout(()=>{
this.list = ['你好!','我','已','刷新了']
uni.stopPullDownRefresh()
},2000)
},
onLoad() {
},
//方法
methods: {
pullDown(){
uni.startPullDownRefresh();
}
}
}
</script>
更多推荐
已为社区贡献17条内容
所有评论(0)