1.使用HbuilderX创建项目
2.新建vue.config.js进行别名配置
3.如果需要安装npm插件，先运行npm init进行初始化
4.利用uni.request封装接口请求
5.自定义顶部导航
组件
<template>
<view>
<view class="navigation-box" :style="[{height:navHeight + 'px',width:contentWidth+'px'}]">
<view class="content" >
<view class="action" @tap="handleGoBack" v-if="isBack" :style="[{top:barTop + 'px'}]">
<text class="cuIcon-back"></text>
<slot name="backText"></slot>
</view>
<view class="title" :style="[{top:barTop + 'px'}]">
<slot name="content"></slot>
</view>
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
barTop: 0,
navHeight: 0,
contentWidth:0,
};
},
name: 'top-navigation-bar',
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
created(){
uni.getSystemInfo({
success: (e)=> {
this.$data.barTop =e.statusBarHeight
this.$data.contentWidth = e.windowWidth
// #ifndef MP
if (e.platform == 'android') {
this.$data.navHeight = e.statusBarHeight + 50;
} else {
this.$data.navHeight = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
this.$data.barTop = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.$data.navHeight = custom.bottom + custom.top - e.statusBarHeight + 4;
// #endif
}
});
},
methods: {
handleGoBack() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style lang="scss" scoped>
.navigation-box{
background-color: #1cbbb4;
.content{
position: relative;
.title{
position: absolute;
display: inline-block;
color: #fff;
left: 50%;
transform: translate(-50%,50%);
}
.action{
color: #fff;
position: absolute;
left: 20px;
transform: translateY(50%);
}
}
}
</style>
引用
<TopNavigationBar class="navBox" bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">首页</block>
</TopNavigationBar>
