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>