vant2 + vue实现顶部固定，页面切换的手机网站页面

vant使用这里不赘述了，具体就是使用van-tabs和van-tab

 <van-tabs swipeable  animated  v-model="active"  sticky @click="onClick">
      <van-tab  v-for="(item,index) in tabs"  :title="item.text" :key="index" :name="item.index">
                <div v-show="index===0" class="section" ref="aa" :style="{minHeight:tList.length*135+50+'px'}">
                  <van-list
                      v-model="loading"
                      :finished="finished"
                      finished-text="没有更多了"
                      @load=""
                  >
                    <van-cell
                        v-for="(item,index) in tList"
                        :key="index" class="orderList"
                        @click="$router.push({path:'/user/add',query:{id:item.sysId}})"
                    >
                      <div class="box">
                        <p> <van-tag type="primary"  style="" >{{item.pointType}}</van-tag><van-tag  style="margin-left: 2px" plain  type="success">已保存</van-tag></p>
                        <p style="font-size: 11px;">
                          <span >单号：{{item.sysId}}</span>
                          <span style="margin-left: 10%">提报时间：{{item.applyTime}}</span>
                        </p>
                        <p > 发生地点：{{item.pointLocation}}   </p>
                        <span style="margin-top: 3px">发生时间：{{item.happenTime}}</span>
                                              <van-button  style="float: right;border: none;margin-top: -5px;margin-right:3px;display: inline-block" icon="clear" size="mini"  @click="del(item.id)"  plain type="danger">删除
                                              </van-button>
                      </div>
                    </van-cell>
                  </van-list>

                </div>

              <div v-show="index===1" class="section" ref="aa" :style="{minHeight:tList.length*135+50+'px'}">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load=""
                >
                  <van-cell
                      v-for="(item,index) in tList"
                      :key="index" class="orderList"
                      @click="$router.push({path:'/user/detail',query:{id:item.sysId}})"
                  >
                    <div class="box">
                      <p> <van-tag type="primary"  style="" >{{item.pointType}}</van-tag><van-tag  style="margin-left: 2px" plain  type="success">已提交</van-tag></p>
                      <p style="font-size: 11px;">
                        <span >单号：{{item.sysId}}</span>
                        <span style="margin-left: 10%">提报时间：{{item.applyTime}}</span>
                      </p>
                      <p > 发生地点：{{item.pointLocation}}   </p>
                      <span style="margin-top: 3px">发生时间：{{item.happenTime}}</span>
                                            <van-tag v-if="item.result===1"  type="success"  style="float: right;margin-right: 2px;margin-top: 1px" size="medium"><van-icon name="success" />通过</van-tag>
                                            <van-tag v-if="item.result===2" type="danger "  style="float: right;margin-right: 2px;margin-top: 1px" size="medium"><van-icon name="cross" />未通过</van-tag>
                                            <van-tag v-if="item.result===0" type="warning "  style="float: right;margin-right: 2px;margin-top: 1px" size="medium"><van-icon name="question-o" />审核中</van-tag>
                    </div>
                  </van-cell>
                </van-list>
              </div>

              <div v-show="index===2" class="section" ref="aa" :style="{minHeight:awardList.length*135+50+'px'}">
                <p style="text-align: center;color: #666666;">您当前拥有积分: {{userPoint}}</p>
                <van-card
                    v-for="(item,index) in awardList"
                    style="width: 100%;height: 120px"
                    :tag="userPoint>=item.needPoint?'可兑换':''"
                    :key="index"
                    :num="'剩余'+item.awardStock"
                    :price="'需要积分'+item.needPoint"
                    :desc="item.awardName"
                    :title="item.awardName"
                    :thumb="item.awardImg"
                >
                  <template #tags>
                    <van-tag plain type="danger">热门</van-tag>
                  </template>
                  <template #footer >
                    <van-button size="mini"   style="font-size: 12px;height: 20px;line-height: 20px;" @click="convert(item)">立即兑换</van-button>
                  </template>
                </van-card>
                <p style="text-align: center;color: #666666;margin-top: 5px">没有更多数据</p>
              </div>
      </van-tab>
    </van-tabs>