自定义导航栏
我们不同手机的导航栏不一样,这是为了确保我们每个手机都能看到我们导航栏的全部信息
不会被遮挡,给不同机型进行样式适配
- 准备组件静态结构
- 修改页面配置,隐藏默认导航栏,修改文字颜色
- 样式适配 -> 安全区域
-
<script setup lang="ts"> // </script> <template> <view class="navbar"> <!-- logo文字 --> <view class="logo"> <image class="logo-image" src="@/static/images/logo.png"></image> <text class="logo-text">新鲜 · 亲民 · 快捷</text> </view> <!-- 搜索条 --> <view class="search"> <text class="icon-search">搜索商品</text> <text class="icon-scan"></text> </view> </view> </template> <style lang="scss"> /* 自定义导航条 */ .navbar { background-image: url(@/static/images/navigator_bg.png); background-size: cover; position: relative; display: flex; flex-direction: column; padding-top: 20px; .logo { display: flex; align-items: center; height: 64rpx; padding-left: 30rpx; padding-top: 20rpx; .logo-image { width: 166rpx; height: 39rpx; } .logo-text { flex: 1; line-height: 28rpx; color: #fff; margin: 2rpx 0 0 20rpx; padding-left: 20rpx; border-left: 1rpx solid #fff; font-size: 26rpx; } } .search { display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx 0 26rpx; height: 64rpx; margin: 16rpx 20rpx; color: #fff; font-size: 28rpx; border-radius: 32rpx; background-color: rgba(255, 255, 255, 0.5); } .icon-search { &::before { margin-right: 10rpx; } } .icon-scan { font-size: 30rpx; padding: 15rpx; } } </style>
代码存放位置:src/pages/index/componets/CustomNavbar.vue
- componets/CustomNavbar.vue需要新建的
-
这里标红的地方是我报错的地方,我的解决方法如下:
- 加入这几句话
-
"target": "esnext", "module": "esnext", "strict": false, "jsx": "preserve", "moduleResolution": "node"
- 获取安全距离
-
-
这里我遇到的问题是仍然写完这些仍然没有适配,我们只需要重启以下vscode再点一下微信开发者工具中的编译就可以成功了
-
我们如何验证是否成功呢,微信开发者工具里面可以更换机型。
-