Help, why my views are in the same window?

In my framework7 app, the views are in the same window, not in different, i scroll, and i can view all, this is my code:

in my-app.js

var myApp = new Framework7({
domCache: true
});

var mainView = myApp.addView(’.view-main’);
var mainView2 = myApp.addView(’.view-main2’);
var mainView3 = myApp.addView(’.view-main3’);

in index.html

        <div class="views">
            <div id="view-1" class="view view-main">
              <div class="pages"> 
                 <div data-page="index-1" class="page theme-gray">             
                      content
                 </div>
              </div>
            </div>
            <div id="view-2" class="view view-main2">
              <div class="pages"> 
                 <div data-page="index-2" class="page theme-gray">
                     content
                 </div>
              </div>
            </div>  
            <div id="view-3" class="view view-main3">
              <div class="pages"> 
                 <div data-page="index-3" class="page theme-gray">
                     content
                    </div>
                 </div>
              </div>
        </div>

Take a look at the inline pages samples. When you use domCache, you need to set the “cached” attribute on all pages except the one you want to view at the start. Then you navigate to those pages using the router methods or links. Also, you probably don’t need multiple views - just multiple pages within a single view would be typical. Additional views are good for things like side panels that may need their own navigation.

Hope that helps.

1 Like