Onsen UI组件实现下拉刷新和固定定位

前言：最近用 Vue + Cordova + Onsen UI开发APP的过程中，在页面上遇到两个问题。
（1）没法实现正常的类似于PC端页面中的固定定位，像position:fixed，这种css属性在app中是会经常出现问题的。
（2）v-ons-pull-hook 不论写在页面哪个位置，都只能在 v-ons-tool-bar 下生效，导致我们无法在页面中间或者底部的固定div内下拉刷新。

固定定位

1. 解决思路：
   访问 Onsen UI的 v-ons-page，找到demo页面，f12查看 v-ons-tool-bar 元素的样式，它如何实现固定定位，你就如何实现。简化demo代码结构如下：

  <v-ons-page>            
    <v-ons-toolbar>         
     
    v-ons-toolbar>

    <div class="content">     
      
    div>
  v-ons-page>

通过调试台，看到代码被编译成这样子，右边为每个元素对应的主要css，这些css起到了页面布局的关键作用（头部固定层级最高，背景和内容区域重叠，但是内容区域能够向下滑动，从而露出背景，可以显示刷新）：

<ons-page>            
    <ons-toolbar class="toobar">         
     
    ons-toolbar>
    <div class="page__background">     
    <div class="content page__content">     
      
    div>
  ons-page>

2. 实现

<v-ons-page>            
    <v-ons-toolbar>         
     
    v-ons-toolbar>
    <div style="position:absolute;z-index:10000;
          height:50px;top:44px">固定定位div>
    <div class="content" style="top:94px">       
      
    div>
  v-ons-page>

下拉刷新

这次切到 v-ons-pull-hook demo页面，简化demo代码如下：

<v-ons-page>
    <v-ons-toolbar>
      
    v-ons-toolbar>

    <v-ons-pull-hook>    
      <span> Pull to refresh span>
      <span> Release span>
      <span> Loading... span>
    v-ons-pull-hook>

       
          <v-ons-list>
            <v-ons-list-item v-for="n in 10">
              list
            v-ons-list-item>
          v-ons-list>
    
 v-ons-page>

通过控制台，我们发现v-ons-pull-hook的height和它的父元素的margin-top互为相反数，即v-ons-pull-hook的height默认为64px，v-ons-page的margin-top则为-64px，并且它的css使用了相对定位。
以上现象说明它的位置和高度定义都会影响到父元素。所以，应该将v-ons-pull-hook元素放入

实现如下：

<v-ons-page>
    <v-ons-toolbar>
      
    v-ons-toolbar>

    <div style="position:absolute;z-index:10000;
          height:50px;top:44px">固定定位div>

    <div class="content" style="top:94px">
    
      <v-ons-pull-hook>    
	      <span> Pull to refresh span>
	      <span> Release span>
	      <span> Loading... span>
      v-ons-pull-hook>
      
      <v-ons-list>
         <v-ons-list-item v-for="n in 10">
           list
         v-ons-list-item>
       v-ons-list>
    div>
 v-ons-page>

1. 总结得仓促，表达得不清楚
2. 只是根据控制台猜想，正确的步骤是看源码实现
3. 先实现需求，日后再补