微信小程序页头页脚固定，中间区域滚动

最新推荐文章于 2024-02-29 10:44:14 发布

qhd吴飞

最新推荐文章于 2024-02-29 10:44:14 发布

阅读量262

点赞数

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/yusha123/article/details/132298215

版权

wxml

<view class="van-page">

  <view class="van-header"></view>

  <scroll-view class="van-content" scroll-y>
    <view wx:for="{{100}}" wx:key="item">{{item+1}}</view>
  </scroll-view>

  <view class="van-footer"></view>
</view>

wxss

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

.van-header {
  background-color: aqua;
  height: 100rpx;
}

.van-content {
  flex: 1;
  background-color: rgb(230, 118, 118);
  overflow: hidden;
}

.van-footer {
  background-color: rgb(0, 255, 55);
  height: 100rpx;
}