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

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

固定定位

解决思路：
访问 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>

实现

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

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