4***@qq.com
4***@qq.com
  • 发布:2024-04-21 12:42
  • 更新:2024-04-22 11:40
  • 阅读:235

首页用import 导入navbar时,顶部搜索框不显示,用不导入,而直接用navbar就没问题

分类:uni-app

<template>
<view>
<view class="box-bg">
<uni-nav-bar>

            <view class="input-view">  
                <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />  
                <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词">  
            </view>  
            <template v-slot:right>  
                <view class="city">  
                    搜索  
                </view>  
            </template>  
        </uni-nav-bar>  
    </view>  
</view>  

</template>

<script>
import uninavbar from"@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
export default {
data() {
return {

        }  
    },  
    methods: {  

    },  
    uni_modules:{  
        uninavbar  
    }  
}  

</script>

<style lang="scss">
$nav-height: 30px;

.box-bg {  
    background-color: #F5F5F5;  
    padding: 5px 0;  
}  

.city {  
    /* #ifndef APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: flex-start;  
    // width: 160rpx;  
    margin-left: 4px;  
}  

.input-view {  
    /* #ifndef APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    // width: 500rpx;  
    flex: 1;  
    background-color: #f8f8f8;  
    height: $nav-height;  
    border-radius: 15px;  
    padding: 0 15px;  
    flex-wrap: nowrap;  
    margin: 7px 0;  
    line-height: $nav-height;  
}  

.input-uni-icon {  
    line-height: $nav-height;  
}  

.nav-bar-input {  
    height: $nav-height;  
    line-height: $nav-height;  
    /* #ifdef APP-PLUS-NVUE */  
    width: 370rpx;  
    /* #endif */  
    padding: 0 5px;  
    font-size: 12px;  
    background-color: #f8f8f8;  
}  

</style>
上面是navbar代码用在首页里,那搜索框正常显示。
下面是新建一个目录,用导入navbar,但最后搜索框不显示。是什么原因?

<template>
<view>
<navbar />
</view>
</template>

<script>
import navbar from"@/uni_modules/navbar/navbar.vue"
export default {
data() {
return {

        }  
    },  
    methods: {  

    },  
    uni_modules:{  
        navbar  
    }  
}  

</script>

<style lang="scss">

</style>

2024-04-21 12:42 负责人:无 分享
已邀请:
困难总比办法多

困难总比办法多

因为该组件遵循了easycom组件规范

困难总比办法多

困难总比办法多

而且你自己注册的语法也是错误的

import navbar from '@/components/navbar/navbar.vue';  
    export default {  
        components: { navbar} // 2. 注册组件  
    }
  • 4***@qq.com (作者)

    下载插件导入HBuilderX默认是uni_modules文件包,components是在uni_modules文件包里的其中一个uni-nav-bar文件包内

    2024-04-22 15:25

  • 困难总比办法多

    回复 4***@qq.com: 引入是根据你的目录结构来我这只是一个示例,重点是第二步 components: { navbar} // 2. 注册组件 而不是uni_modules:{ navbar }

    2024-04-23 09:31

  • 4***@qq.com (作者)

    回复 困难总比办法多: 非常感谢,刚刚弄好,被官方下载的插件误导,直接用了uni_modules文件,下载uni_modules插件后,我把所有文件弄到components文件里,问题解决了!

    2024-04-23 22:19

要回复问题请先登录注册