uniapp开发时遇到的问题和解决方案
uniapp 开发中遇到的需求和问题以及解决方法
·
判断手机系统
let osName = plus.os.name.toLowerCase(); // ios或android
页面通信
// 跳转页面并发送数据
uni.navigateTo({
url:"/pages/chat/customerService",
success(res) {
res.eventChannel.emit("RoomToCustomerService",{
roomNumber: that.roomAllInfo.roomNumber,
roomId: that.roomID
});
}
});
// 在被跳转的页面 接收传递来的数据
let eventChannel = that.getOpenerEventChannel();
eventChannel.on("RoomToCustomerService",function(res){
that.gameRoomInfo = res;
});
调用子组件方法
首先给组件定义一个ref属性(ref=”msgInput”),然后使用 this.$refs.msgInput.function();
<!-- 定义 -->
<chatInput ref="msgInput"></chatInput>
// 使用
this.$refs.msgInput.closeFunction();
textarea实现点击发送按钮不失焦
这个问题完全是不认真看文档导致。
阻止返回按键(无法阻止IOS的右滑)
使用 onBackPress 可以监听返回事件(手机返回按键或点击了顶部的返回按钮),该方法返回 true 时会阻止返回行为。
export default{
onLoad(){},
onBackPress(e){
let from = e.from; // 有navigateBack和backbutton两个值
return true; // 阻止返回事件
}
}
e.from标识触发返回事件的是来自哪里,navigateBack点击了顶部的返回按钮,backbutton点击了手机的返回键。
关于scroll-view
1、数据量大时不推荐使用scroll-view应使用页面的滚动代替,此时的滚动是页面的滚动,需要在 onPageScroll 方法里监听而不是对顶层view设置监听事件
其他优化
1.、app上可以使用div替代view提升性能。
IOS独有的
去除IOS键盘的toolbar
pages.json中给对应的页面加一个style属性, softinputNavBar:none
"style" :{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"softinputNavBar":"none"
}
IOS底部安全区
如果不设置安全区,并且使用了定位 bottom:0px; 这个元素会陷入到安全区。
// 下面代码就是设置安全区的,+20rpx是因为该元素本来就需要一个20rpx的padding-bottom
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
取消IOS回弹
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"softinputNavBar":"none",
// 让页面不能滚动,阻止IOS的bounce效果
"disableScroll":true
}
更多推荐
已为社区贡献4条内容
所有评论(0)