uniapp写移动端常见问题汇总
1. 手机顶部状态栏遮挡
写在需要的地方
<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
2. 手机顶部状态栏字体颜色
// pages.json
"statusBarStyle": "light",
3. 背景覆盖全屏
page{width: 100%;height: 100%;
}
.index {width: 100%;height: 100%;background: url("@/static/1-bj.png") no-repeat center;
}
4. 手机端禁止拖拽页面
// pages.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"app-plus": {"bounce": "none"}}}
],
5. 手机端隐藏顶部状态栏和底部按键
onShow: function() {// #ifdef APP-PLUS// 隐藏顶部电池,时间等信息plus.navigator.setFullscreen(true);//隐藏虚拟按键plus.navigator.hideSystemNavigation()// #endif
},
6. 绝对定位计算位置
const bear_box = this.$el.querySelector(".bear_box")
const shovel = this.$el.querySelector(".shovel1")
const sho = this.$el.querySelector(".shovel")
const stick = this.$el.querySelector(".stick")let len = stick.offsetHeight + sho.offsetHeight
console.log("整个铲子长度：", len)
let top = len * Math.cos(this.deg * Math.PI / 180)
console.log("铲子高度", top)
let left1 = len * Math.sin(this.deg * Math.PI / 180)
console.log("铲子宽度", -left1)
console.log("铲子左侧位置：", bear_box.offsetLeft + shovel.offsetLeft - left1)
console.log("铲子上侧位置：", bear_box.offsetTop + shovel.offsetTop + top)
或者
getElementInfo(className) {// 创建选择器对象const query = uni.createSelectorQuery().in(this);let eleInfo// 选择我们想要的元素query.select(className).boundingClientRect(data => {if (data) {eleInfo = data}}).exec(); // 执行选择器查询return eleInfo
}const shovel = this.getElementInfo(".shovel")
console.log("整个铲子长度：", shovel)
7. 获取整个屏幕宽高
getDeviceInfo() {const systemInfo = uni.getSystemInfoSync();this.screenWidth = systemInfo.screenWidththis.screenHeight = systemInfo.screenHeight
},
8. 获取元素信息
因为有时候获取不到，所以用同步
async getElementInfo(className) {return new Promise((resolve, reject) => {// 创建选择器对象const query = uni.createSelectorQuery().in(this);// 选择我们想要的元素query.select(className).boundingClientRect(data => {if (data) {resolve(data);} else {reject(new Error('如果没有获取到数据，返回错误'));}}).exec(); // 执行选择器查询});
}const timer = setInterval(async ()=>{const shovel = await this.getElementInfo(".shovel")
}, 20)
9. 碰撞检测
碰撞对象的中心坐标减去被碰撞对象的中心坐标的绝对值，
碰撞对象宽度/高度的一半加被碰撞对象宽度/高度的一半。
如果后者（高度与宽度同时）大于前者，两者相撞。
（该功能需要极短时间重复执行）
xCenter(Object)是一个取得jQuery对象相对父元素x轴坐标加上自身元素一半宽度值的函数
yCenter(Object)是一个取得jQuery对象相对父元素y轴坐标加上自身元素一半宽度值的函数
Math.abs(xCenter(碰撞对象) - xCenter(被碰撞对象)) < hWidth(碰撞对象) + hWidth(被碰撞对象)
&& Math.abs(yCenter(碰撞对象) - yCenter(被碰撞对象)) < hHeight(碰撞对象) + hHeight(被碰撞对象)