Ionic 3可以向单页滑动

时间:2017-12-04 15:29:13

标签: angular ionic-framework ionic2

我已经禁用了'向后滑动'全局,包括根组件和模块配置

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

...
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}),
...

我需要只为一页启用它。因此,尝试通过将导航实例传递给构造函数然后将swipeBackEnabled设置为true来设置它。

ionViewWillEnter() {
    this.nav.swipeBackEnabled = true;
    console.log('swipeBackEnabled ' + this.nav.swipeBackEnabled);
    console.log('canGoBack ' + this.nav.canGoBack());
    console.log('canSwipeBack ' + this.nav.canSwipeBack());
}

记录swipeBackEnabled并且canGoBack返回true,但canSwipeBack返回false。如果我在模板中的某处添加滑动事件并在右侧滑动时记录这些值,则会将所有值记录为true。然而,没有任何反应,似乎刷回来不起作用?我错过了什么吗?

作为参考,我使用的是Ionic 3.9.2和@ ionic / app-scripts 3.1.4。提前致谢

2 个答案:

答案 0 :(得分:3)

I'm not completely sure what did the trick here, but the following setup made it work for me:

var httpWebRequest = (HttpWebRequest)WebRequest.Create("http://ipaddress:1237");
httpWebRequest.ContentType = "application/json";
httpWebRequest.Method = "POST";
using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
{
    string json = "{'params': {'auth_remoteaddr': '10.10.5.103', 'auth_type': 'ANONYMOUS', 'auth_name': 'ANONYMOUS', 'auth_pass': 'ANONYMOUS', 'login_auth_name': 'crm', 'login_auth_pass': 'crm1234', 'create_session': true, 'login_auth_type': 'ADMIN'}, 'method': 'login.login'}";
    streamWriter.Write(json);
    streamWriter.Flush();
    streamWriter.Close();
}
var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
{
    var result = streamReader.ReadToEnd();
}

appNav here is an instance of ionic NavController. I don't yet fully understand why setting swipeBackEnabled in other lifecycle hooks didn't make it, so I'll continue investigating later on. This might be a starting point for someone who might encounter same issue though.

答案 1 :(得分:1)

这样做会为我的离子菜单创建一个id,就像我给出了主菜单一样。在你的控制器部分访问它。

<强> app.html

<ion-menu [content]="appNav" id="main-menu">
....
....
</ion-menu>
<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>
在app.component.ts文件中

将下面的代码放在构造函数

  menuCtrl.swipeEnable(false, 'main-menu');

所以上面的代码用作禁用侧边菜单滑动以通过整个应用程序打开功能。

假设您想要只在一个页面中启用滑动打开侧边菜单,请添加以下代码

this.menuCtrl.swipeEnable(true, 'main-menu');

这将使滑动打开侧面菜单功能。

注意:一旦使用了swipeEnable(true,'main-menu');这将能够访问整个应用程序。为了解决它,只在一个重复页面页面中使用,并禁用前一页面和下一页面尊重当前页面。

  

仅在当前页面上启用它并在当前页面的前后页面上禁用它

<强>更新

另一种实现此目的的方法是在同一页面上启用和禁用它。

ionViewDidEnter(){
    this.menuCtrl.swipeEnable(true, 'main-menu');
}

并使用ionviewdidleave

在同一页面上禁用它
ionViewDidLeave(){
    this.menuCtrl.swipeEnable(false, 'main-menu');
}

因此,上面的代码将执行启用和禁用侧边菜单的方法