老有人私信问我,顶部导航栏怎么弄。哎~ 只能发一个代码出来。我自己瞎封装的。不见得很好。凑合看吧
<template>
<!-- <view class="title-padding"> -->
<view class="top_bar">
<view class="l_bar">
<slot name="left">
<span class="iconfont iconback" @tap="goBack" />
</slot>
</view>
<view class="c_bar">
<slot name="center">
<text>默认标题</text>
</slot>
</view>
<view class="r_bar">
<slot name="right" class="r_bar">
<span class="iconfont iconfenxiang"></span>
<span class="iconfont icon19"></span>
</slot>
</view>
</view>
<!-- </view> -->
</template>
<script>
export default{
name:'topTab',
created() {
// #ifdef APP-PLUS
this.hasNotch();
// #endif
},
methods: {
goBack(){
uni.navigateBack();
},
hasNotch(){
// if(plus.navigator.hasNotchInScreen()){
// uni.showToast({
// title: '此设备是刘海屏',
// duration: 2000
// });
// }else{
// uni.showToast({
// title: '此设备不是刘海屏',
// duration: 2000
// });
// }
}
},
}
</script>
<style lang="scss" scope>
// #ifdef APP-PLUS
.title-padding{
height: var(--status-bar-height);
width: 100%;
padding-top: 44px;
box-sizing: content-box;
}
// #endif
.top_bar{
display: flex;
height: 66rpx;
line-height: 66rpx;
box-sizing: border-box;
padding: 0 20rpx;
margin-top: var(--status-bar-height);
.l_bar{
width: 100rpx;
}
.c_bar{
flex: 1;
text-align: center;
font-size: 40rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #011223;
}
.r_bar{
width: 100rpx;
display: flex;
justify-content: space-around;
}
}
</style>
如何引入在下面的文章 uniapp商店购物车