uniapp开发微信小程序顶部固定，其他地方滚动

uniapp开发微信小程序实现顶部固定，其他地方滚动，也就是滚动条不出现在头部，只出现在腰部。

效果图是这样的：

1、页面

<view class="alarm" :style="'background:'+ (showFilter ? 'rgba(0,0,0,0.45)' :'')">
    <view class="default_con" :style="'height:' + (top + 100) +'px;flex: 0, 0, '+ (top + 100)+'px;'">
      <view class="space-view" :style="'height:' + top +'px;' ">
        <view class="fixedView" :style="'height:' + top +'px;' " />
      </view>
      <view class="space-view2" v-if="bg !== 'transparent'" />
      <view class="nav"  :style=" 'top:'+ top +'px;' ">
        <view class="_text">告警管理</view>
        <view class="_left_icon" v-show="isNavBack" @click="goBack">
          <text class="iconfont" v-if="bg !== 'transparent'">&#xe60f;</text>
          <image class="go_back_img" v-else src="../static/img/go_back.png" />
        </view>
        <view class="_left_icon" v-show="isNavUser" @click="showMy">
          <text class="iconfont">&#xe674;</text>
        </view>
      </view>
      <view class="_top_search">
        <view class="_tab_con">
          <view class="_right_icon" @click=" showFilter = !showFilter ">
            <text>筛选</text>
            <text class="iconfont" v-if="!showFilterNum">&#xe612;</text>
            <text class="filter-num" v-else>{{alarmsData.total > 99 ? '99+' : alarmsData.total}}</text>
          </view>
          <view
            class="_tab_item"
            :class=" params.listType==='01' ? 'hot' : '' "
            @click="changeType('01')"
          >当前告警</view>
          <view
            class="_tab_item _ml"
            :class="{hot: params.listType==='02', 'hasCircle': waitTag!==0}"
            @click="changeType('02')"
          >历史查询</view>
        </view>
      </view>
    </view>
    <list class="_list" v-if="!showFilter" :alarmsData="alarmsData"></list>
  </view>

2、样式

page{
  width: 100%;
  height:100%;
}
 
.alarm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height:100%;


  .default_con {
    width: 100%;
    background: linear-gradient(
      323deg,
      rgba(73, 203, 148, 1) 0%,
      rgba(22, 182, 152, 1) 100%
    );
    overflow: hidden;
  }
  .fixed-view {
    width: 100%;
    z-index: 11;
  }
  .space-view2 {
    height: 88rpx;
  }
  .nav {
    position: fixed;
    z-index: 11;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;

    ._text {
      text-align: center;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
    }

    ._left_icon {
      position: absolute;
      left: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      .go_back_img {
        width: 46rpx;
        height: 46rpx;
        display: inline-block;
      }
      font-size: 46rpx;
    }
  }
}

.space-search {
  height: 115rpx;
}
._top_search {
  background: transparent;
  flex-grow: 0;
  height: 114rpx;
  overflow: hidden;
  position: fixed;
  left: 0;
  width: 100%;
}
._search_ipt {
  height: 68rpx;
  border-radius: 68rpx;
  margin: 30rpx 40rpx 0;
  padding-left: 50rpx;
  background: #f4f6f8;
  font-size: 28rpx;
}

._tab_con {
  margin: 38rpx 40rpx;
  overflow: hidden;
  font-size: 36rpx;
  color: #ffffff;
  height: 38rpx;
  line-height: 38rpx;

  ._tab_item {
    float: left;
    position: relative;
    font-size: 32rpx;
    opacity: 0.6;

    &.hot {
      font-weight: bold;
      font-size: 38rpx;
      opacity: 1;
    }
    &.has-circle {
      &:after {
        content: " ";
        width: 15rpx;
        height: 15rpx;
        border-radius: 15rpx;
        display: inline-block;
        background: #ff5000;
        position: absolute;
        right: -10rpx;
        top: 20rpx;
      }
    }
  }
  ._ml {
    margin-left: 40rpx;
  }
  ._right_icon {
    float: right;
    font-size: 30rpx;
    .filter-num {
      border-radius: 30rpx;
      background: #f2fbfa;
      color: #25bba9;
      padding: 0 20rpx;
      font-size: 30rpx;
      margin-left: 10rpx;
    }
    .iconfont {
      font-size: 26rpx;
    }
  }
}
._list {
  flex: 1;
  position: relative;

}
._bg {
  background: #fff;
}

3、数据

  /**
   * 页面的初始数据
   */
 
  data() {
    let user = uni.getStorageSync("userInfo");
    let userRole = uni.getStorageSync("userRole") || {};

    let params = {
      startOccurTime: "",
      endOccurTime: "",
      leve: "",
      treeId: "",
      assetId: "",
      name: "",
      conf: "",
      asstype: 0,
      listType: "01"
    };
    return {
      userRole: userRole,
      user: user,
      showFilter: false,
      showFilterNum: false,
      index: 1,
      alarmsData: {
        assetMap: [
          {
            assetName: "1号配电房",
            name: "",
            severityId: "1",
            contentDesc: '{"defaultValue":"A相电压高于标准电压10%"}',
            occurTime: "2019-09-21 10:45",
            warn: "0",
            operUserName: ""
          },
          {
            assetName: "1号配电房",
            name: "",
            severityId: "2",
            contentDesc: '{"defaultValue":"A相电压高于标准电压10%"}',
            occurTime: "2019-09-21 10:45",
            warn: "2",
            operUserName: ""
          },
          {
            assetName: "1号配电房",
            name: "",
            severityId: "1",
            contentDesc: '{"defaultValue":"A相电压高于标准电压10%"}',
            occurTime: "2019-09-21 10:45",
            warn: "0",
            operUserName: ""
          },
          {
            assetName: "1号配电房",
            name: "",
            severityId: "1",
            contentDesc: '{"defaultValue":"A相电压高于标准电压10%"}',
            occurTime: "2019-09-21 10:45",
            warn: "0",
            operUserName: ""
          },
          {
            assetName: "1号配电房",
            name: "",
            severityId: "1",
            contentDesc: '{"defaultValue":"A相电压高于标准电压10%"}',
            occurTime: "2019-09-21 10:45",
            warn: "0",
            operUserName: ""
          }
        ],
        total: 100
      },
      params: params,
      waitTag: 0,
      isNavUser: true
    };
  },
  components: {
    Header,
    list,
    search
  },
  computed: {
    top() {
      let systemInfo = uni.getSystemInfoSync();
      return systemInfo.statusBarHeight;
    }
  }

我是整体粘上来的，代码会有点冗余或者方法找不到的地方，这个大家自己建一个方法就行哈。