1. 修改pages.json文件
增加navigationStyle
{"path": "pages/index/index","style": {"navigationStyle": "custom","navigationBarTitleText": "首页"}},
2. 下载uni-ui扩展组件库
npm install @dcloudio/uni-ui --save
3. 编写代码
components/CustomNavbar.vue文件
<script>
const { safeAreaInsets } = uni.getSystemInfoSync()
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';export default {components: {uniIcons},data() {return {safeAreaInsets,searchValue: ''}},methods: {handleSearch() {console.log(this.searchValue)},handleScan() {uni.scanCode({success: (res) => {console.log("res", res)}})}}
}
</script><template><view class="navbar" :style="{paddingTop: safeAreaInsets?.top + 10 + 'px'}"><view class="logo"><image class="logo-image" src="/static/images/logo.png" /><text class="logo-text">新鲜 · 亲民 · 快捷</text></view><view class="search"> <uni-icons color="#fff" type="search" size="16" @click="handleSearch"></uni-icons><input class="search-value" v-model="searchValue" placeholder="搜索商品"><uni-icons color="#fff" type="scan" size="16" @click="handleScan"></uni-icons></view></view></template><style lang="scss">
.navbar {background-image: url(@/static/images/navigator_bg.png);background-size: cover;padding-bottom: 20rpx;.logo {display: flex;align-items: center;height: 64rpx;padding-left: 30rpx;.logo-image {width: 166rpx;height: 39rpx;}.logo-text {font-size: 26rpx;color: #fff;padding-left: 20rpx;margin-left: 20rpx;border-left: 1px solid #fff;}}.search {display: flex;align-items: center;justify-content: space-between;padding: 0 26rpx 0 26rpx;height: 64rpx;margin: 16rpx 20rpx;color: #fff;font-size: 28rpx;border-radius: 32rpx;background-color: rgba(255, 255, 255, 0.5);.uni-icons {width: 32rpx;}.search-value {flex: 1;padding: 0 20rpx;}}
}
</style>
index.vue文件
<script>
import CustomNavbar from '@/components/CustomNavbar.vue'export default {components: {CustomNavbar},data() {return {}},methods: {}
}</script><template><view class="viewport"><CustomNavbar /></view>
</template><style lang="scss">
page {background: #f7f7f7;
}
</style>