中国网站建设网,网易做相册旅游网站,品牌网站建设特色,网页设计经典案例我们在用uniapp 开发应用的时候#xff0c;有的页面需要自定义导航#xff0c;
1.如果普通的直接使用uni 扩展柜组件的 uni-nav-bar 也基本够用#xff0c;
2.如果稍微带点自定义的这个值无法支持的#xff0c;特别在小程序端#xff0c;胶囊是会压住右边的按钮的
自定…我们在用uniapp 开发应用的时候有的页面需要自定义导航
1.如果普通的直接使用uni 扩展柜组件的 uni-nav-bar 也基本够用
2.如果稍微带点自定义的这个值无法支持的特别在小程序端胶囊是会压住右边的按钮的
自定义个写 支持插槽
不带插槽的直接使用 自定义值看props里面的 小程序端 h5 app端
1.新建组件 目录结构 components/NavBar.vue
NavBar.vue 文件templateview view classnavbar :style{backgroundColor:bgcolor,z-index:zindex}view :style{height:topspx}/viewview :style{height:heightpx,line-height:heightpx}view classmainbox :style{width:widtHpx,height:100%}slot namelf :style{height:heightpx} v-ifisBackview classnav-bar-lfuni-icons :typelicon size25 :colortitColor clickgoBack/uni-icons/view/slotslot namelc :style{height:heightpx,color:titColor}view classnav-bar-lc :style{color:titColor}{{title}}/view/slotslot namelr :style{height:heightpx} v-ifisRbtnview classnav-bar-lruni-icons :typericon size25 :colortitColor clickhandRbtn/uni-icons/view/slot/view/view/view/view
/template
scriptexport default {props: {title: {// 标题文字(默认为空)type: String,default: ,},titColor: {// 标题和返回按钮颜色(默认白色)type: String,default: #999,},//建议使用background 因为使用backgroundColor会导致不识别渐变颜色bgcolor: {// 背景颜色type: String,default: #f4f4f4,},zindex: {// 层级type: Number,default: 1,},isBack: {// 是否显示返回按钮type: Boolean,default: true,},isRbtn: {// 是否显示右边按钮type: Boolean,default: false,},// 图标licon: {// 返回按钮图标type: String,default: left,},ricon: {// 右边按钮图标type: String,default: search,},},data() {return {height: ,widtH: ,tops: }},created() {// #ifdef MPuni.getSystemInfo({success: (e) {// 计算安全高度this.tops e.statusBarHeight;let custom uni.getMenuButtonBoundingClientRect();// 标题栏高度this.height custom.height (custom.top - e.statusBarHeight) * 2;// 计算标题栏减去 胶囊的宽度this.widtH e.windowWidth - custom.width - 10}})// #endif},methods: {goBack() {uni.navigateBack({delta: 1 // 返回的页面数})},// 搜索handRbtn() {this.$emit(onRight)}}}
/scriptstyle.navbar {width: 100%;position: fixed;top: 0px;}.mainbox {display: flex;align-items: center;/* #ifdef H5 || APP */height: 45px !important;line-height: 45px;/* #endif */}.nav-bar-lf {width: 45px;height: 100%;text-align: center;}.nav-bar-lc {flex: 1;height: 100%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.nav-bar-lr {width: 50px;height: 100%;text-align: center;}
/style页面中使用 index.vue templateviewNavBar :isBacktrue :isRbtntrue title首页 onRighthandRight/NavBar/view
/template
script// 根据自己的路径import NavBar from ../../../components/NavBar.vue export default {components: {NavBar},data() {return {}},onLoad() {},methods: {handRight(){console.log(点击右边)}}}
/scriptstyle/style带插槽的 如果带插槽的 里面样式自己想怎么写怎么写
各端展示如下 代码如下 index.vue
templateviewNavBar :isBacktrue :isRbtntrue title首页 template #lfview classitem1 item左边/view/templatetemplate #lcview classitem2 item标题部分/view/templatetemplate #lrview classitem3 item右边/view/template/NavBar/view
/template
scriptimport NavBar from ../../../components/NavBar.vueexport default {components: {NavBar},data() {return {}},onLoad() {},methods: {}}
/scriptstyle
.centermain{flex:1;color:#fff;display: flex;align-items: center;
}
.item{flex: 1;background: pink;
}
.item1{flex: 1;background: pink;
}
.item2{flex: 1;background: greenyellow;
}
.item3{flex: 1;background: salmon;
}
/style
