Использовать кнопку возврата Android на устройстве, чтобы вернуться к основному виду в приложении Framework7?

Недавно я создал приложение, используя framework7 и Cordova. Мое приложение состоит из одного html-файла, в котором есть все представления. Для перехода между представлениями в верхней части каждого дочернего представления имеется кнопка «Назад».

Если человек нажмет кнопку «Назад» на устройстве, приложение закроется.

Как я могу использовать кнопку «Назад», чтобы перейти на главную страницу, когда я нахожусь на дочерних страницах?

Я прочитал API-интерфейс маршрутизатора на веб-сайте framework7, но он действительно сбивает с толку и, похоже, не работает. Вот что я пытаюсь:

<html>
  <head>...</head>
  <body>
    ...
    <!-- Views -->
    <div class="views">
      <!-- View -->
      <div class="view view-main">
        <!-- Pages -->
        <div class="pages">
          <!-- Home page -->
          <div class="page" data-page="index">
            <div class="page-content">
              <p>Home page</p>
            </div>
          </div>

          <!-- About page -->
          <div class="page cached" data-page="about">
            <div class="page-content">
              <p>About page</p>
            </div>
          </div>

          <!-- Services page -->
          <div class="page cached" data-page="services">
            <div class="page-content">
              <p>Services page</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </body>
</html>

// Initialize App  
var myApp = new Framework7();

// Initialize View          
var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

Обратите внимание, что я хочу использовать физическую кнопку на устройстве для перехода к основному виду, когда я нахожусь в другом div.

Пожалуйста помоги.


person Aky Kumar    schedule 02.06.2016    source источник


Ответы (6)


Если вы просто хотите перейти к предыдущим страницам, используйте pushState : true в инициализации приложения, вы сможете вернуться с помощью аппаратной кнопки «Назад» в framework7. Если вы хотите открыть определенную страницу, mainView.router.load — это функция в framework7. Вы можете выполнить проверку на маршрутизаторе, чтобы проверить, является ли страница вашей страницей mainView. Делая это, вы можете контролировать выход из приложения. Когда загружается предыдущая страница, она вызывает маршрутизатор, и маршрутизатор предоставляет вам подробную информацию о странице, например: page.name,page.query. Надеюсь это поможет

person Mahen    schedule 04.06.2016

Здравствуйте, коллеги-разработчики.

Я знаю, что всех так раздражает проблема с аппаратной кнопкой возврата Android в framework7, и поиск решения также очень утомителен, поскольку я сам боролся. Итак, здесь у меня есть фрагмент кода, который поможет вам решить все проблемы с аппаратной кнопкой «Назад» (всплывающее окно, модальные окна, всплывающие окна, боковая панель и выход из приложения) на устройствах Android. пожалуйста, просмотрите код и отправьте запрос, если возникнет путаница.

Функция готовности устройства

function onDeviceReady() {
    document.addEventListener('backbutton', onBackKeyDown, false);
}

function onBackKeyDown() {
    var cpage = mainView.activePage;
    var cpagename = cpage.name;
    console.log(cpagename);
    if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
        myApp.closePanel();
        return false;
    } else if ($$('.modal-in').length > 0) {
        myApp.closeModal();
        return false;
    } else if (cpagename == 'index') {
        myApp.confirm('Are you sure you want to exit?', function() {
            // var deviceType = device.platform;
            // if(deviceType == “Android” || deviceType == “android”){
            navigator.app.exitApp();
            // }
        },
        function() {
        });
    } else {
        mainView.router.back();
    }
}
person sjkushwaha21    schedule 06.10.2017

Чтобы вернуться назад, перейдите к шагу 1. my-app.js step2. Вставьте следующее:

// Initialize your app
var myApp = new Framework7({pushState: true,});

Запустите приложение еще раз. Надеюсь это поможет

person Edo Udoma    schedule 04.09.2017

Вставьте приведенный ниже код в функцию готовности устройства.

document.addEventListener("backbutton", yourCallbackFunction, false);

создать ниже функцию

function yourCallbackFunction(){
 alert(window.location);
 }

вы можете сделать что угодно, если вы получите это событие один раз. вы можете перемещаться, используя разные идентификаторы страниц, к другому виду.

person Divyanshu Joshi    schedule 02.06.2016

Благодаря @sjkushwaha21 я изменил код для Framework7 V2. Используется в методах объекта Framework7, вызывается

onDeviceReady: function() {
    document.addEventListener("backbutton", myApp.methods.onBackKeyDown, false);
},

... и вот метод:

var myApp = new Framework7({
    ....,
    methods: {
        onBackKeyDown: function() {
            var leftp = myApp.panel.left && myApp.panel.left.opened;
            var rightp = myApp.panel.right && myApp.panel.right.opened;
            if ( leftp || rightp ) {
                myApp.panel.close();
                return false;
            } else if ($$('.modal-in').length > 0) {
                myApp.dialog.close();
                return false;
            } else if (myApp.views.main.router.url == '/') {
                myApp.dialog.confirm('Are you sure you want to exit?', 'Exit MyApp', function() {
                    navigator.app.exitApp();
                },
                function() {
                });
            } else {
                mainView.router.back();
            }

        }, ...
person MWik    schedule 28.03.2018

это работа. :)

open kitchen-sink.js введите код
var myApp = new Framework7({ pushState: true, });

person Abidroid    schedule 22.01.2018
comment
Не могли бы вы объяснить и предоставить соответствующие детали, подтверждающие ваш ответ. Вероятно, JS Fiddle. - person Aditya; 22.01.2018