uni-app - 基于uView的base-navbar实现

demo 地址: https://github.com/iotjin/jh-uniapp-demo

uni-app项目中，有时通过pages.json设置navbar达不到想要的效果，此时需要使用自定义的navbar组件来实现，本项目中的navbar是基于uView的Navbar 进行二次封装

#效果图

用法

pages.json的navigationStyle要设置为custom，然后在需要的页面加nav组件代码

注：实际一个页面只有一个navbar，isFixed是为了demo展示才放出来的属性，一般不加

{"path": "pages/module3/index","style": {"navigationStyle": "custom", // 使用自定义导航栏"navigationBarTitleText": "我的","enablePullDownRefresh": false}
}

 <view class="text"> 默认样式，左侧返回和标题 </view><base-navbar :isFixed="false" title="标题" /><!-- 自定义右侧solt，rightImg、rightText 失效 --><view class="text"> 自定义右侧solt，rightImg、rightText 失效 </view><base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" :rightText="rightText"><u-icon name="chat" size="38" slot="right" @click="clickRightItem"></u-icon></base-navbar><!-- 右侧图片 --><view class="text"> 右侧图片 </view><base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" @clickRightItem="clickRightItem" /><!-- 右侧文字 --><view class="text"> 右侧文字 </view><base-navbar :isFixed="false" :title="title" :isBack="false" :rightText="rightText" @clickRightItem="clickRightItem" /><!-- 自定义左侧solt，leftImg、leftText 失效  --><view class="text"> 自定义左侧solt，leftImg、leftText 失效 </view><base-navbar :isFixed="false" :title="title" :isBack="false"><u-icon name="chat" size="38" slot="left" @click="clickLeftItem"></u-icon></base-navbar><!-- 左侧图片 --><view class="text"> 左侧图片 </view><base-navbar :isFixed="false" :title="title" :isBack="false" :leftImg="leftImg" @clickLeftItem="clickLeftItem" /><!-- 左侧文字 --><view class="text"> 左侧文字 </view><base-navbar :isFixed="false" title="标题" :isBack="false" :leftText="leftText" @clickLeftItem="clickLeftItem" />

全部代码


<template><view><u-navbar :is-back="isBack" :back-icon-color="backColor" :title="title" :title-color="titleColor" :background="background" :is-fixed="isFixed"><template v-if="$slots.left"><slot name="left"></slot></template><template v-else-if="leftImg"><image class="nav-item-img" :src="leftImg" @click="onClickNavLeftItem"></image></template><template v-else-if="leftText"><view class="nav-item-text" @click="onClickNavLeftItem">{{leftText}}</view></template><template v-if="$slots.right" slot="right"><slot name="right"></slot></template><template v-else-if="rightImg" slot="right"><image class="nav-item-img" :src="rightImg" @click="onClickNavRightItem"></image></template><template v-else-if="rightText" slot="right"><view class="nav-item-text" @click="onClickNavRightItem">{{rightText}}</view></template></u-navbar></view>
</template><script>export default {name: "base-navbar",props: {// 是否显示返回按钮，默认为trueisBack: { type: Boolean, default: true },title: { type: String, default: '' },// 右侧图片地址，优先级高于rightText，低于右侧slot rightImg: { type: String, default: '' },rightText: { type: String, default: '' },// 左侧图片地址，优先级高于leftText，低于左侧slotleftImg: { type: String, default: '' },leftText: { type: String, default: '' },isFixed: { type: Boolean, default: true },},data() {return {backColor: "white",titleColor: "white",background: {// backgroundColor: '#38BC9D',// // 导航栏背景图// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',// // 还可以设置背景图size属性// backgroundSize: 'cover',// 渐变色backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'}};},methods: {onClickNavLeftItem() {this.$emit("clickLeftItem", {});},onClickNavRightItem() {this.$emit("clickRightItem", {});}}}
</script><style>.nav-item-text {color: white;padding: 10px;display: flex;align-items: center;justify-content: center;}.nav-item-img {padding: 10px;display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;}
</style>

uni-app - 基于uView的base-navbar实现相关推荐

HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
一款App基于mPaaS小程序如何进行改造？
这篇故事围绕着一款 App 基于 mPaaS 小程序进行改造娓娓展开. 作为国内校园服务场景最丰富的平台,笑联 App 已覆盖国内 130 所高校,服务近百万高校学生. 截止目前,笑联 App 内的 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
dalvik.system.PathClassLoader[DexPathList[[zip file /data/app/comda.xfdsafda.activdity-1/base.apk]
下面是出错的日志信息 10:42:25.638 2656-2656/comda.xfdsafda.activdity E/AndroidRuntime: FATAL EXCEPTION: mainPr ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...

uni-app - 基于uView的base-navbar实现

demo 地址: https://github.com/iotjin/jh-uniapp-demo

用法

全部代码

uni-app - 基于uView的base-navbar实现相关推荐

最新文章

热门文章