网站备案 资讯,福田补贴每人9000元,电子商务网站建设李洪心课后答案,欧派全屋定制【uni-app】自定义导航栏
新手刚玩uniapp进行微信小程序#xff0c;甚至多端的开发。原生uniapp的导航栏#xff0c;并不能满足ui的需求#xff0c;所以各种查阅资料#xff0c;导航栏自定义内容 整理如下#xff1a;
需要修改的文件如下#xff1a; 1、pages.json
修…【uni-app】自定义导航栏
新手刚玩uniapp进行微信小程序甚至多端的开发。原生uniapp的导航栏并不能满足ui的需求所以各种查阅资料导航栏自定义内容 整理如下
需要修改的文件如下 1、pages.json
修改pages.json启动导航栏自适应设置navigationStyle: custom
{pages: [{path: pages/v2/AIChat/AIChat,style: {navigationBarTitleText: AI,navigationStyle: custom }}],globalStyle: {navigationBarTextStyle: black,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8,app-plus: {background: #efeff4}}
}2、system_info.js
新建system_info.js用于获取当前设备的机型系统信息。
/*** 此js文件管理关于当前设备的机型系统信息*/
const systemInfo function() {/****************** 所有平台共有的系统信息 ********************/// 设备系统信息let systemInfomations uni.getSystemInfoSync()// 机型适配比例系数let scaleFactor 750 / systemInfomations.windowWidth// 当前机型-屏幕高度let windowHeight systemInfomations.windowHeight * scaleFactor //rpx// 当前机型-屏幕宽度let windowWidth systemInfomations.windowWidth * scaleFactor //rpx// 状态栏高度let statusBarHeight (systemInfomations.statusBarHeight) * scaleFactor //rpx// 导航栏高度 注意此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用状态栏高度自定义文本高度let navHeight 0 //rpx// console.log(windowHeight,哈哈哈哈哈);/****************** 微信小程序头部胶囊信息 ********************/// #ifdef MP-WEIXINconst menuButtonInfo wx.getMenuButtonBoundingClientRect()// 胶囊高度let menuButtonHeight menuButtonInfo.height * scaleFactor //rpx// 胶囊宽度let menuButtonWidth menuButtonInfo.width * scaleFactor //rpx// 胶囊上边界的坐标let menuButtonTop menuButtonInfo.top * scaleFactor //rpx// 胶囊右边界的坐标let menuButtonRight menuButtonInfo.right * scaleFactor //rpx// 胶囊下边界的坐标let menuButtonBottom menuButtonInfo.bottom * scaleFactor //rpx// 胶囊左边界的坐标let menuButtonLeft menuButtonInfo.left * scaleFactor //rpx// 微信小程序中导航栏高度 胶囊高度 (顶部距离 - 状态栏高度) * 2navHeight menuButtonHeight (menuButtonTop - statusBarHeight) * 2// #endif// #ifdef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight,menuButtonHeight,menuButtonWidth,menuButtonTop,menuButtonRight,menuButtonBottom,menuButtonLeft,navHeight}// #endif// #ifndef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight}// #endif
}export {systemInfo
}3、HeadNav.vue
新建组件HeadNav.vue这是自定义导航栏。
/*
* 注意
* 1、在传入宽度或者高度时如果是Number数据传入的值为px大小,无需带单位组件自动计算
* 2、在使用此导航栏时建议传入UI规定的导航栏高度此高度只针对除微信小程序的其他平台有效微信小程序的导航栏高度组件自计算
*/
templateview :style{height:navHeightrpx}!-- 微信小程序头部导航栏 --!-- #ifdef MP-WEIXIN --view classwx-head-mod :style{height:navHeightrpx,backgroundColor:navBackgroundColor}view classwx-head-mod-nav :style{height:navigationBarHeightrpx,top:statusBarHeightrpx}view classwx-head-mod-nav-content:style{height:customHeightrpx,justifyContent:textAlign center?center:left}!-- 文本区 --view classwx-head-mod-nav-content-mian:style{width:navTextWidth,lineHeight:customHeight rpx,paddingLeft:textPaddingLeft*scaleFactorrpx,fontSize:fontSize*scaleFactorrpx,fontWeight:fontWeight,color:titleColor}{{textContent}}/view!-- 返回按钮 --view classwx-head-mod-nav-content-back :style{display:isBackShow?flex:none}clickbackEventview classwx-head-mod-nav-content-back-img:style{width:backImageWidth*scaleFactorrpx,height:backImageHeight*scaleFactorrpx}image :srcbackImageUrl mode stylewidth: 100%;height: 100%;/image/view/view/view/view/view!-- #endif --!-- 除微信小程序之外的其他设备 --!-- #ifndef MP-WEIXIN --view classother-head-mod:style{height:navHeightValue*scaleFactorstatusBarHeightrpx,backgroundColor:navBackgroundColor}view classother-head-mod-mian:style{height:navHeightValue*scaleFactorrpx,justifyContent:textAlign center?center:left}!-- 返回按钮 --view classother-head-mod-mian-back v-showisBackShow clickbackEventview classother-head-mod-mian-back-img:style{width:backImageWidth*scaleFactorrpx,height:backImageHeight*scaleFactorrpx}image :srcbackImageUrl mode stylewidth: 100%;height: 100%;/image/view/view!-- 标题 --view classother-head-mod-mian-title :style{width:windowWidth - 184rpx,lineHeight:navHeightValue*scaleFactorrpx,paddingLeft:textPaddingLeft*scaleFactorrpx,fontSize:fontSize*scaleFactorrpx,fontWeight:fontWeight,color:titleColor}{{textContent}}/view/view/view!-- #endif --/view
/templatescriptconst app getApp()import {systemInfo} from /pages/v2/acommon_js/system_info.jsexport default {name: HeadView,props: {// 文本区域位置 left左 center中 textAlign: {type: String,default: center},// 文本区内容textContent: {type: String,default: 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好还},// 文本区离左边的距离textPaddingLeft: {type: Number,default: 16},// 是否需要返回按钮isBackShow: {type: Boolean,default: true},// 文本区字体大小fontSize: {type: Number,default: 20 //px},// 文本区字体粗细fontWeight: {type: Number,default: 700},// 文本区返回按钮图片宽backImageWidth: {type: Number,default: 12 //px},// 文本区返回按钮图片高backImageHeight: {type: Number,default: 24 //px},// 返回按钮图标路径backImageUrl: {type: String,default: /static/v2/aichat/ai_robot.png},// 导航栏整体背景颜色navBackgroundColor: {type: String,default: #2476F9},// 标题字体颜色titleColor: {type: String,default: #ffffff,},/******** h5端app端需要传入自定义导航栏高度 *******/navHeightValue: {type: Number,default: 44 //px}},computed: {// 文本区宽度navTextWidth() {if (this.textAlign center) {return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) rpx} else {return this.menubarLeft rpx}},// 文本区paddingLefttextPaddingleft() {if (this.textAlign center) {return 0} else {return this.textPaddingLeft rpx}}},data() {return {statusBarHeight: app.globalData.statusBarHeight, //状态栏高度navHeight: app.globalData.navHeight, //头部导航栏总体高度navigationBarHeight: app.globalData.navigationBarHeight, //导航栏高度customHeight: app.globalData.customHeight, //胶囊高度scaleFactor: app.globalData.scaleFactor, //比例系数menubarLeft: app.globalData.menubarLeft, //胶囊定位的左边leftwindowWidth: app.globalData.windowWidth * app.globalData.scaleFactor};},methods: {backEvent() {uni.navigateBack({delta: 1})}},created() {/* 获取设备信息 */const SystemInfomations systemInfo()/* 通用平台 */this.statusBarHeight SystemInfomations.statusBarHeight //状态栏高度this.scaleFactor SystemInfomations.scaleFactor //比例系数this.windowWidth SystemInfomations.windowWidth //当前设备的屏幕宽度/* 微信小程序平台 */// #ifdef MP-WEIXINthis.navHeight SystemInfomations.navHeight SystemInfomations.statusBarHeight //头部导航栏总高度this.navigationBarHeight SystemInfomations.navHeight //头部导航栏高度this.customHeight SystemInfomations.menuButtonHeight //胶囊高度this.menubarLeft SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离// #endifconsole.log(this.navHeight:, this.navHeight)}}
/scriptstyle/* #ifdef MP-WEIXIN */.wx-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;}.wx-head-mod-nav {box-sizing: border-box;width: 100%;position: absolute;left: 0;display: flex;justify-content: center;align-items: center;}.wx-head-mod-nav-content {box-sizing: border-box;width: 100%;display: flex;justify-content: left;align-items: center;position: relative;}/* 文本区 */.wx-head-mod-nav-content-mian {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}/* 返回按钮 */.wx-head-mod-nav-content-back {box-sizing: border-box;width: 60rpx;height: 100%;/* background-color: aqua; */position: absolute;top: 0;left: 32rpx;display: flex;align-items: center;justify-content: left;}.wx-head-mod-nav-content-back-img {box-sizing: border-box;}/* #endif *//* #ifndef MP-WEIXIN */.other-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;}.other-head-mod-mian {box-sizing: border-box;width: 100%;display: flex;align-items: center;justify-content: left;position: absolute;left: 0;bottom: 0;}/* 返回按钮 */.other-head-mod-mian-back {box-sizing: border-box;height: 100%;width: 60rpx;position: absolute;left: 32rpx;top: 0;display: flex;align-items: center;}/* 标题 */.other-head-mod-mian-title {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}/* #endif */
/style4、AIChat.vue
修改要自定义导航栏的组件
templateview styleheight: 100%;head-nav :stylenavStyle/head-navview classcontainer :stylecontainerStylescroll-view :scroll-topscrollTop classchat-container :scroll-into-viewscrollintoid scroll-ytruescrollhandleScroll scrolltolowerhandleScrollToLower省略中间布局内容/scroll-view/view/view
/templatescriptimport HeadNav from /pages/v2/components/HeadNav.vueimport {systemInfo} from /pages/v2/acommon_js/system_info.jsexport default {components: {MarkdownViewer,HeadNav},data() {return {// 省略部分变量containerStyle: ,navStyle: };},onReady() {// -------------------------- 经典界面自定义需要记录-------------------------------------------------------------// 设备系统信息let systemInfomations_ uni.getSystemInfoSync()// 机型适配比例系数let scaleFactor_ 750 / systemInfomations_.windowWidth// 当前机型-屏幕高度let windowHeight_ systemInfomations_.windowHeight * scaleFactor_ //rpx/* 获取设备信息 */const SystemInfomations systemInfo()/* 通用平台 */const statusBarHeight SystemInfomations.statusBarHeight //状态栏高度const scaleFactor SystemInfomations.scaleFactor //比例系数const windowWidth SystemInfomations.windowWidth //当前设备的屏幕宽度/* 微信小程序平台 */// #ifdef MP-WEIXINconst navHeight SystemInfomations.navHeight SystemInfomations.statusBarHeight //头部导航栏总高度const navigationBarHeight SystemInfomations.navHeight //头部导航栏高度const customHeight SystemInfomations.menuButtonHeight //胶囊高度const menubarLeft SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离this.containerStyle height: (systemInfomations_.windowHeight - statusBarHeight - 10) px;;// #endifconsole.log(this.viewHight:, this.viewHeight)/* 通用平台 */// #ifndef MP-WEIXINthis.containerStyle height: (systemInfomations_.windowHeight - 54) px;;this.navStyle height: 44 px;// #endif// ---------------------------------------------------------------------------------------}
}
/script
