uniapp实现今日头条中个人中心的上拉吸顶并头部标题栏显示头像功能

<template>
    <view class="cont">
        <uni-nav-bar :title="''" left-icon="left"
            style="position: sticky;top: 0;z-index: 99999;padding-top: var(--status-bar-height);"
            :background-color="'#fff'">
            <image v-if="showComponent" src="../static/vip.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
            <block slot="right">
                <view class="city">
                    搜索
                </view>
            </block>
        </uni-nav-bar>
        <scroll-view style="width:100%;height: 100vh;" scroll-y @scroll="scrollTopFun" @scrolltolower="scrolltolower">
            <view class="" style="height: 120rpx;background-color: forestgreen;">

            </view>
            <v-tabs :class="showComponent ? 'topnav' : ''" id="tab-bar" style="width: 100%;" v-model="current"
                :tabs="tabs" ref="tabTitle" bgColor="#f6f6f6" color="#000" activeColor="#000" bold lineColor="#8157F4"
                @change="changeTab">
            </v-tabs>
            <view id="list" class="" v-for="item in dataList" style="height: 200rpx;">
                { {item.title}}
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
                showComponent: false, // 是否显示
                tabs: ['关注', '推荐', '问答'],
                current: 1,
                dataList: [{
                        img: '../../static/logo.png',
                        title: '幻灯1',
                        info: '简介',
                        another: '额外',
                        id: 1
                    },
                    {
                        img: '../../static/logo.png',
                        title: