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

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

javascript 复制代码

// my-behavior.js
let 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;
  　　//我这里需要获取多个元素的高度，所以用的是selectAll
      wx.createSelectorQuery().selectAll(seletor[0].join()).boundingClientRect().exec(function(res){
        let allRectH = []
        const { screenHeight, screenWidth, windowHeight } = systemInfo
        console.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 / 750
          mainHeight -= (42 * rpx)
        }
        that.setData({
          mainHeight
        })
      })
    },
  }
})

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

以my-behavior页面为例

javascript 复制代码

<!--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.js
var 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,中间滚动