<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>
2 个回复
困难总比办法多
因为该组件遵循了easycom组件规范
困难总比办法多
而且你自己注册的语法也是错误的
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