1.使用uni-nav-bar 自定义导航栏
需要先在page.js中把当前页面设置
"navigationStyle": "custom"
然后在页面中使用uni-nav-bar
<uni-nav-bar
dark
id="tabbar"
class="tabBar"
title="导航栏组件"
:statusBar="true"
></uni-nav-bar>
需要设置:statusBar="true"，不然导航会跟手机顶部的状态栏重叠
在不知道这个属性之前，发现可以通过设置--status-bar-height（uni-app全局封装的变量）实现
#tabbar {
margin-top: var(--status-bar-height);
}
参考：https://blog.csdn.net/weixin_44143975/article/details/90789026
再看一下uni-nav-bar中uni-status-bar这个组件的源码：
<template>
<view :style="{ height: statusBarHeight }" class="uni-status-bar">
<slot />
</view>
</template>
<script>
export default {
name: 'UniStatusBar',
data() {
return {
statusBarHeight: 20
}
},
mounted() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
}
}
</script>
<style lang="scss" >
.uni-status-bar {
// width: 750rpx;
height: 20px;
// height: var(--status-bar-height);
}
</style>
组件是通过uni.getSystemInfoSync().statusBarHeight这个方法来获取当前设备的状态栏的高度
2.APP左右上下滑动监听
直接引用别人写好的现成的组件：
<template>
<view class="wrapper" @touchstart="fingerstart" @touchend="fingerend">
<slot></slot>
</view>
</template>
<script>
export default {
name: "swipe-direct-com",
data() {
return {
// 记录开始位置
startData: {
clientX: "",
clientY: ""
}
};
},
props: {
updDistance: {
// 上下滑动 超过多少距离触发 updownDistance
type: Number,
default: 100
},
lrDistance: {
// 左右滑动 超过多少距离触发
type: Number,
default: 50
},
topMed: {
// 上划触发 方法名
type: String,
default: ""
},
bottomMed: {
// 下滑触发 方法名
type: String,
default: ""
},
leftMed: {
// 左滑触发 方法名
type: String,
default: ""
},
rightMed: {
// 右滑触发 方法名
type: String,
default: ""
}
},
// 解析数据
mounted() {},
methods: {
// 当按下去的时候
fingerstart(e) {
// 记录 距离可视区域左上角 左边距 和 上边距
this.startData.clientX = e.changedTouches[0].clientX;
this.startData.clientY = e.changedTouches[0].clientY;
},
// 当抬起来的时候
fingerend(e) {
// 当前位置 减去 按下位置 计算 距离
const subX = e.changedTouches[0].clientX - this.startData.clientX;
const subY = e.changedTouches[0].clientY - this.startData.clientY;
if (subY > this.updDistance || subY < -this.updDistance) {
if (subY > this.updDistance) {
this.bottomscroll(subY);
} else if (subY < -this.updDistance) {
this.topscroll(subY);
}
} else {
if (subX > this.lrDistance) {
this.rightscroll(subX);
} else if (subX < -this.lrDistance) {
this.leftscroll(subX);
} else {
console.log("无效操作");
}
}
},
// 上滑触发
topscroll(dista) {
this.topMed ? this.$emit(`${this.topMed}`, dista) : null;
console.log("触发了上滑方法!");
},
// 下滑触发
bottomscroll(dista) {
this.bottomMed ? this.$emit(`${this.bottomMed}`, dista) : null;
console.log("触发了下滑方法!");
},
// 右滑触发
rightscroll(dista) {
this.rightMed ? this.$emit(`${this.rightMed}`, dista) : null;
console.log("触发了右滑方法!");
},
// 左滑触发
leftscroll(dista) {
this.leftMed ? this.$emit(`${this.leftMed}`, dista) : null;
console.log("触发了左滑方法!");
}
}
};
</script>
然后引用组件：
<swiper-direct-com
:lrDistance="5"
leftMed="scrollL"
rightMed="scrollR"
@scrollL="scrollL"
@scrollR="scrollR"
>
<!-- 套起来内容 -->
</swiper-direct-com>
两个方法在methods中：
methods: {
// 左滑触发方法
scrollL() {
console.log("左滑触发方法");
/*
业务逻辑 ....
*/
},
// 右滑触发方法
scrollR() {
/*
业务逻辑 ....
*/
console.log("右滑触发方法");
}
}