talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复navbar不显示问题

main
26947 2024-05-11 09:54:51 +08:00
parent 0587fb9250
commit 677f19b814
3 changed files with 121 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App.vue
View File

@ -43,10 +43,7 @@
box-sizing: border-box;
}
image {
width: 100%;
height: auto;
}
/* Flex布局 */

64
pages/common/navbar/index.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<view class="content">
<!-- 顶部导航栏 -->
<u-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<image src="../static/images/icon/tu2-4.png" class="img1" slot="center"></image>
<view class="img1BOX" slot="left">
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
<image src="../static/images/icon/tu2-5.png" class="img2"></image>
<view class="qiehuanBox">
<u-tabs lineColor="#B3D7FF" lineWidth="50" lineHeight="8"
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
:list="list1" @click="clickList1"></u-tabs>
</view>
</view>
</u-navbar>
</view>
</template>
<script setup>
import {
ref,
reactive,
toRefs,
getCurrentInstance
} from 'vue';
const list1 = ref([{
name: '关注',
}, {
name: '推荐',
}])
const bgColor = ref('rgba(170, 0, 0, 0)');
const clickList1 = () => {
console.log(111);
}
</script>
<style lang="scss" scoped>
.content {
position: relative;
.img1BOX{
width:200rpx;
display: flex;
align-content: center;
.img1{
width: 41rpx;
height: 46rpx;
margin-right: 28rpx;
}
.img2{
width: 46rpx;
height: 46rpx;
}
.qiehuanBox{
margin-left: 130rpx;
display: flex;
align-content: center;
justify-content: center;
}
}
}
</style>

88
pages/index.vue
View File

@ -1,28 +1,23 @@
<template>
<view class="content">
<!-- 顶部导航栏 -->
<!-- <u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<view class="img1BOX flex alignCenter" slot="left">
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<template class="img1BOX" #left>
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
<image src="../static/images/icon/tu2-5.png" class="img2"></image>
<view class="qiehuanBox flex alignCenter justifyCenter">
<u-tabs lineColor="#B3D7FF" lineWidth="50rpx" lineHeight="8rpx"
</template>
<template class="img2Box" #center>
<view class="qiehuanBox">
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
:list="list1" @click="click"></u-tabs>
</view>
</view>
</u-navbar> -->
<up-navbar
leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor"
>
<view class="">
<text>1</text>
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
<image src="../static/images/icon/tu2-5.png" class="img2"></image>
</view>
</up-navbar>
</template>
</u-navbar>
<view class="bgc"></view>
<!-- 搜索栏 -->
<view class="sousuoBox1 flex alignCenter justifyBetween">
@ -271,9 +266,51 @@
}
</script>
<style>
<style lang="scss" scoped>
// 微信小程序配置
:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
padding-left: 32rpx !important;
}
// 安卓app配置
:deep(.u-navbar__content__left[data-v-f631659b], .u-navbar__content__right[data-v-f631659b]){
padding-left: 32rpx !important;
}
.img1BOX{
padding-left: 32rpx;
display: flex;
align-content: center;
}
.img1{
width: 46rpx;
height: 46rpx;
margin-right: 28rpx;
}
.img2{
width: 46rpx;
height: 46rpx;
}
.content {
position: relative;
.img2Box{
.qiehuanBox{
padding-left: 32rpx;
display: flex;
align-content: center;
justify-content: center;
}
}
}
.u-scroll-list.data-v-fea2b4f4 {
padding-bottom: 0px !important;
@ -291,21 +328,8 @@
position: relative;
justify-content: center;
} */
.img1{
width: 41rpx;
height: 46rpx;
margin-right: 28rpx;
}
.img1BOX{
width:698rpx;
}
.img2{
width: 46rpx;
height: 46rpx;
}
.qiehuanBox{
margin-left: 130rpx;
}
.bgc{
width: 750rpx;
height: 356rpx;