Uniapp 小程序实现固定tab，实现下拉刷新内容

实现效果：

代码如下，可直接复制：

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