<template>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
</scroll-view>
<!-- 内容切换 -->
<view>
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
:refresher-threshold="100" refresher-background="#FFF" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
<view class="content" v-if="navIndex==0">
我是选项1
</view>
<view class="content" v-if="navIndex==1">
我是选项2
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navIndex: 0,
triggered: false,
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}],
}
},
onLoad() {
this._freshing = false;
// this._freshing = false;
// setTimeout(() => {
// this.triggered = true;
// }, 1000)
},
methods: {
checkIndex(index) {
console.log(index)
this.navIndex = index;
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
onPulling(e) {
this._freshing = false;
setTimeout(() => {
this.triggered = true;
}, 1000)
// console.log("onpulling", e);
//调接口，等接口回来之后，关闭 this.triggered = true;
console.log("下拉刷新了")
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 1000)
},
onRestore() {
this.triggered = 'restore'; // 需要重置
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
<style scoped>
.activite {
color: #04c9c3;
}
.content {
/* background: #008000; */
height: 300px;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
color: #CCCCCC;
}
.scroll-view-item_H {
display: inline-block;
width: 20%;
height: 50rpx;
line-height: 50rpx;
text-align: center;
padding: 10px 0;
}
</style>
需要注意的是初始化的时候，我们会调接口获取列表数据，?this.triggered = true;这个是关掉下拉刷新的，我当时遇到的问题是一进页面就会刷新，发现?this.triggered = true;写在了初始化获取数据成功之后（status==200)，然后我 onPulling时，再次调的获取列表这个函数
解决办法是： 我把调接口的代码在onPulling时又写了一遍，接口调用成功，?this.triggered = true;
初始化的时候，（不加?this.triggered = true;）
以上是我写的一个小案例，直接放在项目里面就可以啦
