uniapp 实现局部下拉刷新

<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;）

以上是我写的一个小案例，直接放在项目里面就可以啦