uniAPP·已封装好的footer和Header,已经作好 导航状态栏、刘海安全区、小程序胶囊安全区、手机底部物理键安全区,没有时自动为空
1【Header】
<template> <view> <view class="head-1"> <!-- 小程序按钮安全高度 --> <view class="head-2 "> <!-- 一体 --> <view class="head-3" :style="{height:phoneHeight + 'px;'}"> </view> <!-- 系统状态栏安全高度 --> <view class="head-4"> </view> <!-- 设置刘海安全高度 --> <view class="head-5" :style="{height:menuTop}"> </view> <!-- 小程序按钮安全高度 --> <view style="width: auto;height: auto;padding-top: 24px;"></view> </view> <view class="head-view"> <view class="head-Button translate" @tap="headButton()"> <slot name="slot1"></slot><!-- 父组件嵌入1 --> </view> <view> <slot name="slot2"></slot><!-- 父组件嵌入2 --> </view> </view> </view> <!-- 内容安全区分割--> <view class="head-hr" :style="{height:phoneHeight+ 'px;'}"> <view class="head-2"> <view class="head-3"> </view> <view class="head-4"> </view> <view class="head-5" :style="{height:menuTop}"> </view> <view style="width: auto;height: auto;padding-top: 28px;"></view> </view> <view class="head-view" :style="{height:menuHeight}"> </view> </view> </view> </template> <script> export default { data() { return { } }, onInit(){//监听页面初始化 // console.log("onInit ") }, onLoad(){//监听页面加载 // console.log("onLoad ") }, onShow(){//监听页面每次显示 // console.log("onShow ") }, onReady(){//监听页面初次渲染完成 // console.log("onReady") }, methods: { }, components: { } } </script> <style> /* env 屏幕刘海安全区 */ /* padding-top: env(safe-area-inset-bottom); */ /* padding-top: var(--status-bar-height); */ .head-1 { width: 100%; overflow: auto; /* 置顶浮游定位 */ position: fixed; padding-top: 2px; padding-bottom: 5px; z-index: 999; background-color: #108080; } .head-2 {/* 安全区高度包裹 */ width: 100%; height: 100%; } .head-3 {/* 系统状态栏目安全区 动态高度 */ width: 15%; float: left; height:var(--status-bar-height); /* padding-top:var(--status-bar-height); */ } .head-4 {/* iPhone刘海安全区 */ width: 25%; height: env(safe-area-inset-bottom); float: left; } .head-5 {/* 小程序胶囊 动态高度*/ width: 15%; float: right; } .head-hr{ /* 内容安全区 */ width: 100%; height: auto; padding-bottom: 38px; } .head-view{ width: 100%; float: left; } .head-Button { float: left; width: 29px; height: 28px; margin-left: 10px; margin-right: 10px; /* 弧度 */ border-radius: 48px; /* 边框 */ border: 1px solid #cccccc; display: flex; align-items: center; justify-content: center; background-color: #000000; } .head-Button image { width: 23px; height: 23px; border-radius: 50px; /* 弧度 */ } .rotate :active { font-weight: bold; animation: rotate 1s infinite linear; } .translate :active { font-weight: bold; animation: translate 1s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes translate { from { transform: translateX(-20%); } to { transform: translateX(5%); } } /* ============================================== */ </style>
2【使用说明】(需要先引入组件哦)slot=”slot1″ 是图标 和 slot=”slot2″ 是新内容
<view class=""> <Head> <image slot="slot1" src="../../static/zuo.png"> </image> <picker slot="slot2" class="home-picker" @change="PickerLanguage" :range="dataLanguage"> <image src="../../static/language1.png" mode=""> </image> <label> {{dataLanguage[intLanguage]}} </label> </picker> </Head> </view>
3【footer】底部导航(需要先引入组件哦)
<template> <!-- 需要多少个菜单就添加多少个 会自动自适应 --> <view class="footer_1"> <view class="footer_1-1" @tap="GetFooter(0)"> <view class="footer_1-1-t"> <image :src="imgurl1"></image> </view> <view class="footer_1-1-b" :class="fontcolor1"> 主页 </view> </view> <view class="footer_1-1" @tap="GetFooter(1)"> <view class="footer_1-1-t"> <image :src="imgurl2"></image> </view> <view class="footer_1-1-b" :class="fontcolor2"> Dig Data </view> </view> <view class="footer_1-1" @tap="GetFooter(2)"> <view class="footer_1-1-t"> <image :src="imgurl3"></image> </view> <view class="footer_1-1-b" :class="fontcolor3"> Statistics </view> </view> <view class="footer_1-1" @tap="GetFooter(3)"> <view class="footer_1-1-t"> <image :src="imgurl4"></image> </view> <view class="footer_1-1-b" :class="fontcolor4"> Community </view> </view> <view class="footer_1-1" @tap="GetFooter(4)"> <view class="footer_1-1-t"> <image :src="imgurl5"></image> </view> <view class="footer_1-1-b" :class="fontcolor5"> 我的 </view> </view> </view> </template> <script> // import Home from './home.vue'; export default { data() { return { imgurl1: '/static/home3.png', imgurl2: '/static/digdata3.png', imgurl3: '/static/Statistics3.png', imgurl4: '/static/community3.png', imgurl5: '/static/my3.png', fontcolor1: 'font-color-22', fontcolor2: 'font-color-22', fontcolor3: 'font-color-22', fontcolor4: 'font-color-22', fontcolor5: 'font-color-22', inFooter: 1, inFooter2: 0, } }, onShow(){ }, methods: { getSwiper: function(e) { console.log("footer getSwiper:" + e); this.GetFooter(e); }, GetFooter: function(e) { /* 刷空 */ this.imgurl1 = '/static/home2.png'; this.imgurl2 = '/static/digdata2.png'; this.imgurl3 = '/static/Statistics2.png'; this.imgurl4 = '/static/community2.png'; this.imgurl5 = '/static/my2.png'; this.fontcolor1 = 'font-color-22'; this.fontcolor2 = 'font-color-22'; this.fontcolor3 = 'font-color-22'; this.fontcolor4 = 'font-color-22'; this.fontcolor5 = 'font-color-22'; /* 刷空 */ if (e == 0) { this.inFooter = 0; this.imgurl1 = "/static/home1.png"; this.fontcolor1 = 'font-color-00'; } else if (e == 1) { this.inFooter = 1; this.imgurl2 = "/static/digdata1.png"; this.fontcolor2 = 'font-color-00'; } else if (e == 2) { this.inFooter = 2; this.imgurl3 = "/static/Statistics1.png"; this.fontcolor3 = 'font-color-00'; } else if (e == 3) { this.inFooter = 3; this.imgurl4 = "/static/community1.png"; this.fontcolor4 = 'font-color-00'; } else if (e == 4) { this.inFooter = 4; this.imgurl5 = "/static/my1.png"; this.fontcolor5 = 'font-color-00'; } // console.log("点击 inFooter:" + this.inFooter); /* 向父组件 提交数据 inFooter为方法名 */ this.$emit('putFooter', this.inFooter); } }, components: { } } </script> <style> .footer_1 { background-color: #ffffff; position: fixed; bottom: 0; width: 100%; height: 56px; /* 关闭切换动画效果 */ duration: 0; /* 左右上下居中 */ display: flex; justify-content: center; align-items: center; z-index: 1111; border-top: 1px dashed #999999; /* solid 实线 dashed 虚线*/ /* 请到 pages.js 里的 "globalStyle"下添加如下代码, "app-plus":{ "scrollIndicator":"none" } //全局 在APP页面都不显示滚动条 */ /* 手机底部物理键安全区 */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .footer_1-1 { /* 模块 */ margin-top: 3px; margin-bottom: 2px; float: left; width: 100%; } .footer_1-1-t { /* 图标 */ width: 100%; height: 24px; /* 定位模块居中 */ display: flex; justify-content: center; } .footer_1-1-t image { height: 25px; width: 24px; } .footer_1-1-b { /* 标题 */ width: 100%; font-size: 12px; /* 字体大小 */ font-weight: bolder; /* 字体变粗 */ /* 文本上下居中 */ display: flex; justify-content: center; } .font-color-00 { color: #000000; } .font-color-11 { color: #666666; } .font-color-22 { color: #808080; } </style>
4【这个没有自定义图片,需要自己修改图标地址,因为它不是高频率动态所以不做】
776 Views