定製手機背部按鈕，在溫泉UI

我們使用以顯示網頁內容滑動菜單中ONSEN UI & Navigator在它。現在我們想通過按下PHONE BACK KEY來阻止關閉應用程序，而是將其重定向到主頁，如果用戶root是主頁，則顯示一條警告文本「您是否想要關閉應用程序？ {沒有}」。定製手機背部按鈕，在溫泉UI

我的index.html：

<ons-sliding-menu ng-if="!firstInit" menu-page="menu.html" side="right" main-page="home.html" 
      var="menu" type="push" swipe-target-width="150px" max-slide-distance="220px" swipeable="true"> 
     </ons-sliding-menu>

我menu.html：

<ons-list-item modifier="tappable nodivider" ng-click="menu.setMainPage('home.html', {closeMenu: true})"> 
      <p class="menu-text"><i class="fa fa-home fa-fw "></i>Home</p> 
     </ons-list-item> 

     <ons-list-item modifier="tappable nodivider" ng-click="menu.setMainPage('bill.html', {closeMenu: true})"> 
      <p class="menu-text"><i class="fa fa-barcode fa-fw "></i>Enter Code</p> 
     </ons-list-item> 

     <ons-list-item modifier="tappable nodivider" ng-click="menu.setMainPage('account.html', {closeMenu: true})"> 
      <p class="menu-text"><i class="fa fa-user fa-fw "></i>Login</p> 
     </ons-list-item> 

     <ons-list-item modifier="tappable nodivider" ng-click="menu.setMainPage('location.html', {closeMenu: true})"> 
      <p class="menu-text"><i class="fa fa-map-o fa-fw "></i>Show On Map</p> 
     </ons-list-item>

我home.html的：

<ons-navigator var="myNavigator" animation="none"> 
    <ons-page ons-init="menu.setSwipeable(true)" on-device-backbutton="alert('Test!!!')"> 
    . 
. 
. 
<div class="box" ng-click="myNavigator.pushPage('cafe-details.html', {data: {cafeID: cafeItem.ID}})"> 
           <div class="ribbon"> 
            <span ng-show="cafeItem.IsSpecial">Offer</span> 
           </div> 
           <p>{{cafeItem.Name}}<br> 
           <i class="fa fa-map-marker fa-1x"></i>{{cafeItem.Address_Title}}</p> 
           <img class="img-responsive" ng-src="{{CafeImageURL}}{{cafeItem.Image[0].Image}}" loading-src="/images/cafe-no.jpg" fallback-src="/images/cafe-no.jpg" /> 
           <span class="caption full-caption"> 
            <i class="fa fa-eye"><a class="number"> {{cafeItem.Views}} </a></i> 
            <i class="fa fa-comments-o"><a class="number"> {{cafeItem.Comments}} </a></i> 
            <i class="fa fa-thumbs-o-up" id="likes"><a class="number"> {{cafeItem.Likes}} </a></i> 
            <i class="fa fa-thumbs-o-down" id="dislikes"><a class="number"> {{cafeItem.Dislikes}} </a></i> 
           </span> 
          </div>

來源

2016-12-01 SA33D

最後我找到了解決辦法

剛將此添加到index.js！

var back = 0; 
    document.addEventListener("backbutton",onBackButtonPressed, false); 
       function onBackButtonPressed(){ 
        back++; 

       //alert(back); 
       if(back > 1){ 
        $cordovaDialogs.confirm('Exit??', '', ['Yes','No']) 
        .then(function(buttonIndex) { 
         if(buttonIndex==1){ 
         navigator.app.exitApp(); 
         } 
        }); 
       } 
       $timeout(function(){back=0;},2000); 
       var scope = angular.element(document.querySelector("ons-sliding-menu")).scope(); 
       if(scope.menu.isMenuOpened()){ 
        scope.menu.closeMenu('home.html'); 
       } else{ 
        scope.menu.setMainPage('home.html'); 
       } 
       // 

       e.preventDefault(); 

      }

來源

2016-12-03 00:08:39 SA33D

定製手機背部按鈕，在溫泉UI

回答

相關問題