Comments (4)
Can you post full code of your page component?
from framework7-vue.
here is test.vue
<template>
<f7-page hide-bars-on-scroll>
<f7-navbar back-link="Back" title="Hide On Scroll" sliding></f7-navbar>
<f7-toolbar>
<f7-link>Link1</f7-link>
<f7-link>Link2</f7-link>
</f7-toolbar>
<f7-block>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos voluptatibus, sunt quam reprehenderit assumenda hic aut illo, optio fuga reiciendis. Sapiente suscipit sint ratione tenetur voluptate repellendus quaerat perspiciatis repudiandae.</p>
<p>Delectus fuga tempora dignissimos eveniet maxime labore animi, magnam error quas quasi adipisci sed architecto atque maiores facilis natus tempore excepturi libero? Perferendis odio veritatis, aliquam consectetur? Sunt, qui, architecto.</p>
<p>Officiis soluta mollitia, asperiores consequatur itaque optio dolorem laudantium facere eveniet distinctio, cumque. Dolore similique ut, quas ullam ipsam, accusantium unde repellendus voluptatem sint odio id magnam quia sunt harum?</p>
<p>Itaque consequuntur excepturi unde pariatur maiores impedit aliquam necessitatibus perferendis, dolorem tempore nostrum hic iure obcaecati officiis vero cum numquam a dolores atque et! Blanditiis quibusdam, saepe excepturi animi aperiam.</p>
<p>Id facilis magnam nostrum similique repudiandae earum doloremque iusto tempore dolorum amet blanditiis assumenda aliquam deserunt consequuntur, sequi hic odit corrupti? Dolore illo, nihil aut rem dignissimos impedit ex necessitatibus?</p>
<p>Aliquid fugit molestias enim, facere consequatur vitae doloremque modi, dolore perspiciatis nam sequi. Corrupti repellendus blanditiis quo neque vel possimus, ipsum at sed adipisci voluptatibus aliquid quidem, placeat dolor eaque?</p>
<p>Voluptatum, eum, asperiores! Sunt ab maiores ratione iure obcaecati cum reiciendis reprehenderit, quibusdam, blanditiis in facere. Blanditiis maiores laudantium, autem harum ipsam labore eum adipisci inventore eligendi iure dicta ratione!</p>
<p>Ipsum expedita, similique excepturi blanditiis neque aut. Provident labore ea nihil ducimus, distinctio voluptate, tempore facere possimus ipsam, voluptates aliquid cupiditate maiores veniam eos nesciunt. Dolorem eius consectetur voluptates recusandae!</p>
<p>Eius, iusto maxime tempora officia impedit cumque, delectus fugiat enim fugit, ex repudiandae modi autem quasi repellat ea saepe sequi similique animi ipsam doloremque placeat natus minima voluptatibus cum nulla.</p>
<p>Id iste, quod, deserunt maiores consectetur optio placeat quas obcaecati animi, assumenda hic. Temporibus obcaecati fugit omnis modi velit esse dolor nam illo laboriosam ut voluptates voluptatibus vitae, voluptatum officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos voluptatibus, sunt quam reprehenderit assumenda hic aut illo, optio fuga reiciendis. Sapiente suscipit sint ratione tenetur voluptate repellendus quaerat perspiciatis repudiandae.</p>
<p>Delectus fuga tempora dignissimos eveniet maxime labore animi, magnam error quas quasi adipisci sed architecto atque maiores facilis natus tempore excepturi libero? Perferendis odio veritatis, aliquam consectetur? Sunt, qui, architecto.</p>
<p>Officiis soluta mollitia, asperiores consequatur itaque optio dolorem laudantium facere eveniet distinctio, cumque. Dolore similique ut, quas ullam ipsam, accusantium unde repellendus voluptatem sint odio id magnam quia sunt harum?</p>
<p>Itaque consequuntur excepturi unde pariatur maiores impedit aliquam necessitatibus perferendis, dolorem tempore nostrum hic iure obcaecati officiis vero cum numquam a dolores atque et! Blanditiis quibusdam, saepe excepturi animi aperiam.</p>
<p>Id facilis magnam nostrum similique repudiandae earum doloremque iusto tempore dolorum amet blanditiis assumenda aliquam deserunt consequuntur, sequi hic odit corrupti? Dolore illo, nihil aut rem dignissimos impedit ex necessitatibus?</p>
<p>Aliquid fugit molestias enim, facere consequatur vitae doloremque modi, dolore perspiciatis nam sequi. Corrupti repellendus blanditiis quo neque vel possimus, ipsum at sed adipisci voluptatibus aliquid quidem, placeat dolor eaque?</p>
<p>Voluptatum, eum, asperiores! Sunt ab maiores ratione iure obcaecati cum reiciendis reprehenderit, quibusdam, blanditiis in facere. Blanditiis maiores laudantium, autem harum ipsam labore eum adipisci inventore eligendi iure dicta ratione!</p>
<p>Ipsum expedita, similique excepturi blanditiis neque aut. Provident labore ea nihil ducimus, distinctio voluptate, tempore facere possimus ipsam, voluptates aliquid cupiditate maiores veniam eos nesciunt. Dolorem eius consectetur voluptates recusandae!</p>
<p>Eius, iusto maxime tempora officia impedit cumque, delectus fugiat enim fugit, ex repudiandae modi autem quasi repellat ea saepe sequi similique animi ipsam doloremque placeat natus minima voluptatibus cum nulla.</p>
<p>Id iste, quod, deserunt maiores consectetur optio placeat quas obcaecati animi, assumenda hic. Temporibus obcaecati fugit omnis modi velit esse dolor nam illo laboriosam ut voluptates voluptatibus vitae, voluptatum officiis!</p>
</f7-block>
</f7-page>
</template>
<script>
export default {}
</script>
and i use vue-router instead the f7 default router
this is app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
router.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Test from './appComponents/Test'
const routes = [
{ path: '/home', alias: '/', component: Test }
]
// Create the router instance and pass the `routes` option
const router = new VueRouter({
routes
})
export default router
and also the main.js
import Vue from 'vue'
import App from './App'
import store from './store/store'
import Framework7Vue from './framework7-vue.js';
Vue.use(Framework7Vue);
import router from './router'
import Global from './globals/global'
Global.r = router
import VueResource from 'vue-resource'
Vue.use(VueResource)
new Vue({
el: '#app',
framework7: {
root: '#app', //Should be same as app el
animateNavBackIcon: true
},
store,
router,
render: h => h(App)
})
from framework7-vue.
It is not compatible with Vue Router. Built-in router must be used instead
from framework7-vue.
thanks i will use built in router
from framework7-vue.
Related Issues (20)
- Cannot run the kitchen sink
- hope for a more friendly pushState whitch support views
- Left and Right Panel won't open in Kitchen sink
- navbar back-link-url is ignored by f7-navbar HOT 4
- where is calendar ? HOT 1
- First page is loaded twice, when pushState=true and pushStateSeparator='' HOT 5
- List with inline labels and long text as link HOT 2
- Messagebar clear method throw error HOT 1
- How to get current view params ? HOT 2
- stackPages view use router.back({force:true}) HOT 1
- f7-navbar 'no-hairline' and 'class' attributes not applying to element HOT 5
- Vue.use throws error, Framework7.device undefined HOT 4
- [Request] Ability to set 'target' (_self, _blank, etc) on links and buttons HOT 3
- Back fallback if history is empty
- [V3.b18] Bug and fix for swipeout not functional when list-item has click event HOT 3
- Smart select change after not working. HOT 2
- Async Route didn't changed the url path on browser ?
- [V3.b17] Cannot read property "beforeLeave" of undefined HOT 3
- I got error theme IOS HOT 2
- Ошибка в item-after в smart-select при использовании в popup HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from framework7-vue.