一、下拉刷新（官方版）
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}}vue页面js部分：
//下拉
onPullDownRefresh() {
console.log('pull down refresh')
//this.getData(true);//加载数据
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},二、上拉加载
//上拉
onReachBottom(){
console.log('上拉')
//this.getData();//加载
},三、回到顶部和滚动监听
view页面：
<view>
<view class="top-btn" @tap="toTop" :style="{'display':(flag===false? 'none':'block')}">
<text class="cuIcon-top"></text>
</view>
</view>css:
.top-btn {
position: fixed;
z-index: 9999;
right: 16px;
bottom: 100px;
background-color: #9e9e9eb8;
padding: 5px;
display: none;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.top-btn .cuIcon-top {
font-size: 30px;
color: #FFFFFF;
}js部分：
data() {
return {
//是否显示回到顶部按钮
flag: false,
}
},
methods: {
// 返回顶部
toTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 100,
});
},
//滚动监听
onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
this.flag = e.scrollTop > 10;
},
}效果：
