小程序中实现多个页面中顶部固定高为50px,底部固定高为50px,中间列表为所在页面剩余高度，且列表内容超出高度时可以滑动。

多个页面中实现相同的布局形式，可以单个页面分别布局，也可采用代码共享的形式实现，要实现代码共享就需要用到混入了，在vue中使用的是mixin，小程序中当然也有，只是名称有些不同，使用的是behavior。首先在项目根目录下创建behavior文件夹，再创建my-behavior.js文件。

// my-behavior.jslet systemInfo = {}module.exports = Behavior({data: {mainHeight: 0},created(){// 获取系统设置wx.getSystemInfo({success: res => systemInfo = res,fail: err => console.log(err)})},methods: {/** * 获取选择器的高度，两个参数：1、选择器数组 2、是否减去全屏手机底部导航指引的高度（仅IOS时需要设置） */getRect(){let seletor = [...arguments]var that = this;　　//我这里需要获取多个元素的高度，所以用的是selectAllwx.createSelectorQuery().selectAll(seletor[0].join()).boundingClientRect().exec(function(res){let allRectH = []const { screenHeight, screenWidth, windowHeight } = systemInfoconsole.log(screenHeight);for (let i = 0; i < seletor[0].length; i++) {allRectH.push(res[0][i].height)}const totalH = allRectH.reduce((prev,curr) => {return prev + (curr)}, 0)// let mainHeight = screenHeight - totalH //自定义头部导航栏时使用屏幕高度let mainHeight = windowHeight - totalH//未使用自定义头部导航栏时使用窗口高度if (seletor[1]) {const rpx = screenWidth / 750mainHeight -= (42 * rpx)}that.setData({mainHeight})})},}})

创建三个页面：my-behavior、my-behavior1、my-behavior2
以my-behavior页面为例

<!--pages/my-behavior/index.wxml--><view class="container"><view class="common c-nav-bar">顶部</view><scroll-view class="scroll-class" style="height: {{mainHeight}}px;" scroll-y><view class="ul"><view class="li" wx:for="{{100}}" wx:key="index">{{item}}</view></view></scroll-view><view class="common bottom">底部</view></view>/* pages/my-behavior/index.wxss */.common{width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;}.c-nav-bar{background-color: pink;}.bottom{background-color: green;}.scroll-class{background-color: aqua;}.li{text-align: center;line-height: 60rpx;}// pages/my-behavior/index.jsvar myBehavior = require('../../behavior/my-behavior')Page({behaviors: [myBehavior],/** * 页面的初始数据 */},/** * 生命周期函数--监听页面显示 */onShow() {// 选择器数组是否减去控制高this.getRect(['.c-nav-bar','.bottom'], true)},})

my-behavior1、my-behavior2页面同my-behavior。
更多关于behavior的使用可参考官方文档：
behavior参考文档
页面及组件中使用behaviors参考文档

上述功能实现效果：

多页面顶部固定高为50px,底部固定高为50px,中间滚动