微信小程序如何固定住顶部区域

第一步：使用srcoll-view组件

<view class="text">不要挡住我！！！！</view>
<scroll-view scroll-y="true" class="body">
...
</scroll-view>

第二步：在wxss文件中使用calc（）函数

.body{
  height: calc(100vh - 36px);
}

下面附个人案例源码：

index.wxml:

<view class="text">不要挡住我！！！！</view>
<scroll-view scroll-y="true" class="body">
  <block wx:for="{{list}}" wx:key="id">
    <view class="item">{{item.name}}</view>
  </block>
</scroll-view>

index.js:

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    list:[{id:0,name:'list1'},{id:1,name:'list2'},{id:2,name:'list3'},{id:3,name:'list4'},{id:4,name:'list5'},
   {id:5,name:'list1'},{id:6,name:'list1'},
   {id:7,name:'list1'},{id:8,name:'list1'}
   ],
  }
})

index.wxss:

.body{
  height: calc(100vh - 36px);
}
.text{
  height: 36px;
}
.item{
  height: 300rpx;
}

注意：calc函数中减号两边必须留有空格！