hide-bars-on-scroll

[kael777]

hi,i copy the code of page "bars-hide" in to a new project from kitchen-sink,just use tag,and nav bar did not hide when i scroll the page,is this a bug?

[nolimits4web]

Can you post full code of your page component?

[kael777]

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)
})

[nolimits4web]

It is not compatible with Vue Router. Built-in router must be used instead

[kael777]

thanks i will use built in router