小程序页面布局——上中下结构

---

内容简述

上中下结构：头脚固定+中间滚动框
使用UI框架：Vant Weapp(引入安装参考)
为了方便，使用了less生成wxss，所以展示的是less代码，有需要可以看：https://www.jianshu.com/p/998d77d46c00

---

思路：先用view把页面分成上中下三部分，整个页面用flex布局，头部和脚部位置固定高度，滚动区域使用 <scroll-view></scroll-view> 标签，中间区域设置为flex:1。

实例

1.效果图

2.代码如下

.wxml：

<view class="m-window m-flex"><view class="m-header"><view class="header-search"><view class="header-inp"><van-search shape="round" placeholder="请输入搜索关键词" use-action-slot bind:search="onSearch"><view slot="action" bind:tap="onClick">搜索</view></van-search></view></view></view><view class="m-middle"><scroll-view scroll-y class="m-scroll" refresher-enabled scroll-anchoring><van-cell-group class="m-noDivider"><van-cell wx:for="{{cellList}}" wx:key="index" wx:for-item="item" title="{{item.name}}" label="{{item.content}}" is-link bind:click="goDetail"></van-cell></van-cell-group></scroll-view></view><view class="m-footer"><view class="btn"><van-button block round type="primary" bind:click="goAdd" class="btnSingle">添加</van-button></view></view>
</view>

.less(仅部分)：

page {height: 100%;.m-flex {width: 100%;height: 100%;display: flex;flex-direction: column;//上部分.m-header {height: 100rpx;display: flex;flex-direction: column;justify-content: center;//搜索部分……}//中间滚动部分.m-middle {flex: 1; //占满height: 1px;.m-scroll {height: 100%;overflow-anchor: auto;}// 表单分隔栏……}//下部分.m-footer {margin: 10px;height: 130rpx;}}
}

所用数据：

cellList: [{     name: 'aa',content: 'bb'}, {name: 'aa1',content: 'bb1'}, {name: 'aa2',content: 'bb2'}, {name: 'aa3',content: 'bb3'}, {name: 'aa4',content: 'bb4'}, {name: 'aa5',content: 'bb6'}, {name: 'aa7',content: 'bb8'}, {name: 'aa9',content: 'bb10'},]

---

碎碎念

一只没有大志、只想摸鱼、脑子还不太好使的菜狗的日常记录，有错欢迎评论指出，其他勿扰(￣︶￣*))

其他相关参考：
1.Vant Weapp: https://vant-contrib.gitee.io/vant-weapp/#/home
2.微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html