zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

uni-app知识点:禁止页面返回及如何实现自定义返回逻辑、实现再次返回退出应用时不退出应用而是在后台运行、uni-app ios滑动时卡顿不流畅问题解决方案

2023-09-11 14:19:54 时间

一、禁止页面返回

  在uni中页面的生命周期有一个 onBackPress ,只要知道这个生命周期怎么使用就可以运用了,只需要在 当前页面 加上 return true,就可以阻止当前页面返回。起初我想当然的以为是return false像阻止默认事件那样,结果一直没有效果。

onBackPress(options) {
    ...
    return true
}

  这里有一个自定义返回教程写的不错,可以参考:uni-app自定义返回逻辑教程:https://ask.dcloud.net.cn/article/35120

  还有比如实现连点2次退出应用

data() {
    return {
        backButtonPress:0,    //连点2次退出应用计时
    }
},

onBackPress(options) {  
  this.backButtonPress++;
  if (this.backButtonPress > 1) { 
    plus.runtime.quit();
  } else {
    plus.nativeUI.toast('再按一次退出应用');
  } 
  setTimeout(function() {
    this.backButtonPress = 0;
  }, 1000);
  return true;
},

二、uni-app实现再次返回退出应用时不退出应用而是在后台运行

  如果APP需要后台驻留,用户返回到首页时会提示退出操作,我们可以不退出而是隐藏至后台,这样的话APP就会在后台运行,以下代码须写在main.js里面,弹出的内容可自定义设置。

let main = plus.android.runtimeMainActivity();
//为了防止快速点按返回键导致程序退出,所以重写quit方法改为隐藏至后台  
plus.runtime.quit = function() {
    main.moveTaskToBack(false);
};
//重写toast方法如果内容为 ‘再次返回退出应用’ 就隐藏应用,其他正常toast 
plus.nativeUI.toast = (function(str) {
    if (str =='再次返回退出应用') {
        plus.runtime.quit();
    } else {
        uni.showToast({
            title: '再次返回退出应用',
            icon: 'none'
        })
    }
});

三、uni-app ios滑动时卡顿不流畅问题解决方案

1、将scroll-view 改为view使用overflow属性。

2、将整个vue页面添加position:fixed;z-index:10;脱离页面的ios自带的滚动。

3、将单独需要滚动的地方设置position:fiexd;z-index:10;