简单的uniapp 自定义导航栏标题与搜索栏切换,自适应机型,废话不多说直接上代码
htnl vue
<view class="nav_bar">
<view class="status_bar"><!-- 这里是状态栏 --></view>
<view class="status_box">
<!-- 这里是返回上一页 图片为监听 -->
<image class="status_back" src="/static/icon/ico_left.png" mode="widthFix" @click="backshouw" ></image>
<!-- 这里是标题 -->
<view class=" status_title" v-if="seen">
<text class="status_title_txt">这里是标题</text>
<image class="status_title_img" src="/static/icon/zdy_ss.png" mode="widthFix" @click="searchshow"><!-- 这里是搜索图标,点击切换为搜索栏 -->
</image>
</view>
<!-- 这里是搜索框 -->
<view class=" status_search" v-else>
<input class="status_ss" @confirm="" confirm-type="search" placeholder="搜索内容" /><!-- @confirm 此事件为键盘右下角 绑定搜索函数使用 -->
<text class="status_aniu" @click="searchshow" >取消</text> <!-- 这里是搜索框,点击切换为搜索栏 -->
</view>
</view>
</view>
<view class="place_holder"><!-- 占位符--></view>
javascript vue
<script>
export default {
data() {
return {
seen: true, //默认显示标题栏
}
},
onLoad() {
},
methods: {
//标题栏切换搜索框
searchshow: function() {
var that = this;
if (that.seen == true) {
that.seen = false
} else {
that.seen = true
}
},
// 返回上一页
backshouw:function(){
uni.navigateBack({
delta: 1,
})
}
}
}
</script>
css vue
.nav_bar {
width: 750rpx;
display: block;
position: fixed;
top: 0;
z-index: 999;
}
.place_holder{ width: 750rpx; display: block; height: calc(var(--status-bar-height) + 44px);}
/*状态栏*/
.status_bar {
height: var(--status-bar-height); // uinapp 自带的获取状态栏高度
width: 750rpx;
display: block;
background: #00a0e9;
}
/*导航栏*/
.status_box {
width: 750rpx;
height: 44px;
background: #00a0e9;
display: flex;
justify-content: flex-start;
align-items: center;
}
.status_back {
width: 50rpx;
height: 50rpx;
display: block;
margin-left: 15rpx;
}
/*显示标题*/
.status_title {
width: 655rpx;
height: 70rpx;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15rpx
}
.status_title_txt {
width: 590rpx;
height: 70rpx;
line-height: 70rpx;
display: block;
margin-right: 15rpx;
color: #fff;
text-align: center;
}
.status_title_img {
width: 50rpx;
height: 50rpx;
display: block;
margin: auto;
}
/*显示搜索*/
.status_search {
width: 655rpx;
height: 70rpx;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15rpx
}
.status_ss {
width: 540rpx;
height: 65rpx;
line-height: 65rpx;
display: block;
margin-right: 15rpx;
color: #fff;
background-color: #fff;
text-align: left;
border-radius: 100rpx;
font-size: 28rpx;
padding-left: 20rpx;
color: #000;
}
.status_aniu {
width: 80rpx;
height: 65rpx;
line-height: 65rpx;
display: block;
font-size: 32rpx;
color: #fff;
text-align: center;
}
最终效果