Monaca onsen-ui условная навигация по страницам

Я пишу простую программу, используя Monaca Cloud IDE, Onsen-ui и PhoneGap/Cordova. Приложение будет иметь только главную страницу и страницу настроек, поэтому я использую «Минимальный шаблон», предоставленный Monaca/Onsen-UI. Дело в том, что я хочу динамически загрузить третью страницу по удовлетворению состояния. Я хочу загрузить экран «Добро пожаловать» при первом открытии приложения после загрузки, но не после этого. Поскольку будет какая-то интеграция с базой данных, я решил, что могу сделать простую вставку в базу данных, сделав запись о том, как пользователь использует приложение. Когда приложение открыто, может быть вызван простой запрос для проверки базы данных, и если существует запись об использовании, экран «Добро пожаловать» не должен загружаться.Monaca onsen-ui условная навигация по страницам

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

Вот мой стандартный index.html страница:

<!DOCTYPE HTML> 
<html ng-app="myAp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 
    <script src="components/loader.js"></script> 
    <link rel="stylesheet" href="components/loader.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script> 
     ons.bootstrap(); 
    </script> 
    </head> 

    <body> 
    <ons-navigator var="myNavigator" page = "page1.html"> 
    </ons-navigator> 
    </body> 

</html>

Я пробовал различные вещи. Я часами читал как Onsen-UI, так и Monaca docs. Это так расстраивает, что документация настолько расплывчата.

Некоторые из вещей, которые я пробовал:

<script> 
    myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]); 
</script>

или

<script> 
    $scope.myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]); 
</script>

Я также попытался pushPage(), но не повезло.

Я также попытался лечения его как обычный HTML, добавив атрибут id="pageNav" к <ons-navigator>, а затем сделать это:

<script> 
    var onsNav = document.getElementById("pageNav"); 
    onsNav.page = "welcomePage.html"; 
</script>

Нет удачи на какой-либо из него.

Может кто-то, пожалуйста, помогите с этим, я чувствую, что я схожу с ума. Пожалуйста, не просто дайте мне ссылку на документы, я был там. Если вы хотите дать ссылку на документы, по крайней мере добавить дополнительные объяснения или рассказать мне, как я могу решить свою конкретную проблему.

Заранее благодарен!

EDIT: на мой вопрос был дан ответ, и он отлично работает. Ниже следует следующий вопрос:

Вопрос только по следующему вопросу: сейчас я пытаюсь вытащить страницу из стека, но это, похоже, не работает. У меня есть кнопка на странице, которая была нажата в стек, при этом кнопка имеет событие onclick. Событие OnClick запускает функцию JS, с функцией вида:

function navToHome() 
    { 
    myNavigator.popPage({animation:fade}); 
    }

Я также попытался:

ons.myNavigator.popPage({animation:fade});

Что я делаю не так?

EDIT: Я понял, что сценарий не стрелять вообще:

Я понял, что выше функция не срабатывает. Я перемещал теги скриптов, неважно, находится ли он внутри или вне тегов <ons-page>.Я также попытался включить его в функцию onReady, как решение первой проблемы, но это тоже не сработало.

источник

2015-12-07 sj.meyer

Это очень простое объяснение: пользовательский интерфейс Onsen, как и остальные библиотеки, требует времени для загрузки в первый раз. Вам просто нужно подождать, пока это не будет загружено. В документах вы можете прочитать о ons.ready(callback), что в основном ждет, пока пользовательский интерфейс Onsen и Cordova не загрузятся до запуска обратного вызова. Этот метод фактически используется в большинстве образцов по документам, поэтому я думаю, что у вас достаточно примеров. В вашем случае, вы должны сделать что-то вроде этого:

<script> 
    ons.bootstrap(); 

    ons.ready(function() { 
    myNavigator.pushPage('welcomePage.html', {animation: 'lift'}); 
    }); 
</script>

Если вы используете AngularJS вы также можете поместить ons.ready(...) внутри ваш первый контроллер.

Обратите внимание, что параметр options для pushPage/insertPage/etc. это не массив, а объект, как вы можете видеть в navigator reference page. [parameter] означает, что параметр является необязательным, а не массивом.

Надеюсь, это поможет!

источник

2015-12-08 02:14:32

Я еще не понимаю код, еще не пробовал выяснять его, но я внедрил его, чтобы увидеть, работает ли он. Оно работает! Спасибо огромное! Если бы я мог проголосовать за вас не один раз, ха-ха. –

Просто быстрый вопрос, хотя, я пытаюсь вытащить страницу из стека сейчас, но это, похоже, не работает. Я отредактирую свое оригинальное сообщение и покажу код, поэтому, пожалуйста, см. Выше. –

@ NutCracker1 Просто сделайте 'onclick =" myNavigator.popPage ({animation: 'fade'}) "' в кнопке или div, где вы хотите (или ng-click для AngularJS). Единственное, что вы должны иметь в виду, это то, что 'myNavigator' должен быть определен в той же области действия кнопки (тот же контроллер в AngularJS). –

Monaca onsen-ui условная навигация по страницам

ответ

Смежные вопросы