weex頁面上划動，固定header

注：請在手機上掃描預覽效果（支持ios、android）

<template>
  <scroller>
    <header class="search">
      <text class="text">sdasxxxxxxxx</text>
    </header>
    <list>
      <template v-for="(index, i) in lists">
        <header :key="`${index}-header`" v-if="i%2===0 && i != 0">
          <text class="banner">{{index}} HEADER</text>
        </header>
        <cell :key="index">
          <div class="panel">
            <text class="text">{{index}}</text>
          </div>
        </cell>
      </template>
    </list>
  </scroller>
</template>

<script>
  export default {
    data () {
      return {
        lists: [
          'First', 'Second', 'Third', 'Fourth',
          'Fifth', 'Sixth', 'Seventh', 'Eighth'
        ]
      }
    }
  }
</script>

<style scoped>
  .search{
    background-color: red;
    opacity: .1;
    background-color: rgba(0,0,0,0.6)
  }
  .search .text{
    background-color: rgba(0,0,0,0.6)
    
  }
  .banner {
    width: 750px;
    padding: 25px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    color: #41B883;
    background-color: rgb(162, 217, 192);
  }
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>