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">   <!-- position:absolute;z-index:10000 -->      
     <!-- 略 -->
    </ons-toolbar>
    <div class="page__background">    <!-- position:absolute;top:44px; --> 
    <div class="content page__content">     <!-- position:absolute;top:44px;overflow:auto -->
      <!-- 略 -->
    </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">  <!-- 94px为toolbar的高度加固定定位div的高度 -->     
      <!-- 略 -->
    </div>
  </v-ons-page>

下拉刷新

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

<v-ons-page>
    <v-ons-toolbar>
      <!-- 略 -->
    </v-ons-toolbar>

    <v-ons-pull-hook>    <!-- position:relative -->
      <span> Pull to refresh </span>
      <span> Release </span>
      <span> Loading... </span>
    </v-ons-pull-hook>

    <!-- <div class="content"> -->   <!-- 加不加这层div决定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>

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

实现如下：

<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>    <!-- position:relative -->
	      <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. 先实现需求，日后再补