在v-ons-navigator上滚动内容

Question

堆叠的<v-ons-navigator>组件的下一页部分

<template id="page2">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Back</v-ons-back-button>
      </div>
      <div class="center">{{ recipe.title }}</div>
    </v-ons-toolbar>
        <img class="center" style="width: 100%" :src="recipe.image" :alt="recipe.title">
          <p style="text-align: center">{{ recipe.description }}</p>
          <h5>Ingredients</h5>
          <ul>
            <li v-for="ind in recipe.ingredients">
              {{ind}}
            </li></ul>
      <v-ons-list>
        <v-ons-list-item v-for="(item, key) in recipe.directions" :key="key">
          <div class="center">
            <span class="list-item__title">{{ item }}</span>
          </div>
        </v-ons-list-item>
      </v-ons-list>
  </v-ons-page>
</template>
<script>
  export default {
    name: "Page2",
    key: "Page2",
    props: ['recipe']
  }
</script>

导航到页面时，我使用以下

this.$emit('push-page', {
          ...Page2, onsNavigatorProps: { recipe: this.$data.recipes[v] }
        })

我收到了新的属性值，但是我无法滚动，并且可以确认是否有足够的内容可以启用滚动功能...如何在{{1 }}组件？