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