判断手机系统

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
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐