l***@qq.com
l***@qq.com
  • 发布:2019-11-27 17:43
  • 更新:2019-11-27 17:43
  • 阅读:1602

滚动条越界到自定义的tabbar和导航栏,如何才能限制滚动条处于页面中间位置

分类:uni-app


代码如下

// index.vue  
<view>  
            <home v-if="PageCur=='home'"></home>  
            <cars v-if="PageCur=='cars'"></cars>  
            <cart v-if="PageCur=='cart'"></cart>  
            <user v-if="PageCur=='user'"></user>  
       // colorui的tabbar  
        <view class="cu-bar tabbar bg-white shadow foot">  
            <view class="action" @click="NavChange" data-cur="home">  
                <view class="cuIcon-homefill"></view>  
                <view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>  
            </view>  
            <view class="action" @click="NavChange" data-cur="cars">  
                <view class="cuIcon-similar"></view>  
                <view :class="PageCur=='cars'?'text-green':'text-gray'">市场</view>  
            </view>  
            <view class="action text-gray add-action">  
                <button class="cu-btn cuIcon-add bg-green shadow"></button>  
                发布新车  
            </view>  
            <view class="action" @click="NavChange" data-cur="cart">  
                <view class="cuIcon-cart">  
                    <view class="cu-tag badge">99</view>  
                </view>  
                <view :class="PageCur=='cart'?'text-green':'text-gray'">  
                    购物车  
                </view>  
            </view>  
            <view class="action" @click="NavChange" data-cur="user">  
                <view class="cuIcon-my">  
                    <view class="cu-tag badge"></view>  
                </view>  
                <view :class="PageCur=='user'?'text-green':'text-gray'">  
                    我的  
                </view>  
            </view>  
        </view>  
// cars.vue  
<template>  
    <view>  
        <!-- <uni-nav-bar :status-bar="true" :fixed="true" left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar> -->  
        <scroll-view scroll-y class="page">  
            <view class="maxhei"></view>  
            <view class="cu-tabbar-height"></view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"  
    export default {...}  
</script>  

<style>  
    .page {  
        height: 100vh;  
    }  

    .maxhei {  
        background-color: blue;  
        height: 1000px;  
    }  
</style>

2019-11-27 17:43 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复