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

内容简述

上中下结构：头脚固定+中间滚动框
使用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