区分手机小程序以及电脑小程序;左滑、导航键返回拦截

本文介绍了如何在微信小程序中区分电脑和手机版本,以及针对左滑、导航键返回的拦截策略,重点讲解了在图片预览模式下的返回处理和uni.previewImage的使用注意事项。
摘要由CSDN通过智能技术生成

1、区分电脑小程序和手机小程序 

//区分电脑小程序、手机小程序(目标:手机小程序)
// #ifdef MP-WEIXIN
uni.getSystemInfo({
	success: (res) => {
		// windows | mac为pc端
		// android | ios为手机端
		// console.log('getSystemInfo,', res.platform);
		if (res.platform == "android" || res.platform == "ios")
			this.preMode = true;
		}
});
// #endif

2、小程序拦截返回

注:目前小程序拦截返回,只检测到了在某种状态下返回的行为,但没有理想的事件执行 

//小程序左滑、导航键返回拦截
onLoad(){
    //小程序拦截左滑,导航键返回
    if (!this.$fn.empty(this.previewFlag)) {
	    wx.enableAlertBeforeUnload({
		    message: "点击右上角关闭"
	    });
    }
}
method:{
    // 查看文件
	open(event) {
		this.previewFlag = true;
		if (this.preMode) {
			// #ifdef MP-WEIXIN
			wx.enableAlertBeforeUnload({
				message: "点击右上角关闭",
			});
		    // #endif
        }
	},
    close() {
		this.previewFlag = false;
		if (this.preMode) {
			// #ifdef MP-WEIXIN
			wx.disableAlertBeforeUnload();
			// #endif
		}
	},
}

3、app左滑、导航键返回拦截

当在图片预览状态左滑返回时,不返回上一页面,而是关闭图片预览状态

// 拦截图片预览返回上一页面
onBackPress(e) {
	if (e.from == "navigateBack" || e.from == "backbutton") {
		if (!this.$fn.empty(this.previewFlag)) {
			this.$refs.fileopen.close();
			return true;
		}
	}
},

注:在手机小程序上使用uni.previewImage预览图片时会调用onHide、onShow,在关闭图片的几秒时间内操作卡顿

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值