微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案

做这么一个界面，让中间紫色和橙色部分的内容铺满在中间位置，并且让橙色部分位置固定不动，紫色部分内容超出时滚动，如图：

首先如何做到呢？

我使用了定位position：fiexed;让它撑满（关键代码），

position: fixed;top: {{topHeight + 30}}rpx;left: 25rpx;right: 25rpx;bottom:30rpx;

然后通过计算出紫色部分的高度 = 紫橙外部view的高度 - 橙色部分的高度，当内容过长时滚动（滚动需要设置一个高度），并完全显示内容。

这么做的目地是如果紫色部分直接设置高度100%时，它里面的内容不会完全显示，因为紫色的高度是根据包含它的外部view的高度设置100%的，而外部的view里面还有一个橙色view的高度，会把紫色往下挤，所以会显示不完全，只能通过计算高度来显示全部的信息。

代码：

首先

app.json,在onLaunch里面设置我的头部导航的高度（我自定义的导航栏）

let that = this;//获取系统信息wx.getSystemInfo({success: res => {that.globalData.statusBarHeight = res.statusBarHeight;//获取状态栏的高度//设置导航栏高度，判断不同系统，设置不同高度if (res.platform == "ios") {that.globalData.navHeight = 44;}else if (res.platform == "android") {that.globalData.navHeight = 48;} else {that.globalData.navHeight = 44;}},fail(err) {console.log(err);}});

接下来，

main.wxml ，我这里是自定义的头部导航组件，就不列出来了，如果不是自定义的，头部导航的高度还有状态栏怎么获取可以百度，我下面的js代码有获取节点高度的，剩下的靠你自己了，都有很简单（不是自定义的可以忽略我上面的代码，如果是系统自带的导航，获取高度去百度）

<!--pages/main/main.wxml-->
<!--调用自定义头部导航-->
<navbar name="首页"></navbar>
<view class="center" style="position: fixed;top: {{topHeight + 30}}rpx;left: 25rpx;right: 25rpx;bottom:30rpx;"><view class="center_top">999999999999999</view><scroll-view class="scroll_body"  scroll-y="true" style="height: {{scrollBodyHeight}}rpx"><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">我可以滚动了</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">666</view><view style="font-size: 42rpx;">我可以滚动了</view><view style="font-size: 42rpx;">我可以滚动了</view><view style="font-size: 42rpx;">我可以滚动了</view><view style="font-size: 42rpx;">我可以滚动了</view></scroll-view>
</view>

main.wxss

/* pages/main/main.wxss */
page{background-color: #169bd5;
}
.center{background-color: darkgreen;overflow: hidden;
}
.center_top{background-color: #F5B728;
}
.scroll_body{background-color:rebeccapurple;
}
/*隐藏滚动条*/
::-webkit-scrollbar{width: 0;height: 0;color: transparent;
}

main.js

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this;//获取系统信息wx.getSystemInfo({success: function (res) {// 获取可使用窗口宽度let clientWidth = res.windowWidth;// 算出比例 px单位转为rpx单位let ratio = 750 / clientWidth;//获取状态栏与导航栏高度的和let heightSum = getApp().globalData.statusBarHeight + getApp().globalData.navHeight;//顶部navbar的高度let topHeight = heightSum * ratio;// 传递数据that.setData({topHeight: topHeight});// 创建节点查询器 querylet query = wx.createSelectorQuery();//获取该center节点位置信息的查询请求query.select('.center').boundingClientRect();//获取该center_top节点位置信息的查询请求query.select('.center_top').boundingClientRect();query.exec(function (res) {//获取以上元素节点高度let centerHeight = res[0].height * ratio;let centerTopHeight = res[1].height * ratio;//计算出scroll_body节点的高度let scrollBodyHeight = centerHeight - centerTopHeight;//传递数据，赋值that.setData({scrollBodyHeight: scrollBodyHeight});});}})},

以上实现了中间view铺满，内容滚动起来的方式，注意的是，scroll-view不给高度不会滚动，所以通过计算高度解决。总之，在研究滚动的时候，只要是子view不给高度溢出就不会滚动，奇奇怪怪的。

微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案相关推荐

微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
微信小程序 - 页面插入添加 Banner 广告超详细教程（支持自定义样式、位置、大小等）及注意事项
前言如果您需要点击弹出的广告,请访问: 微信小程序 - 页面插入广告(激励式广告). 本文将从 0-1 完成整个过程,您只需要按照步骤操作即可, 代码干净整洁注释详细,快速将代码移植到您的微信小程序 ...
微信小程序-页面配置-界面显示部分
微信小程序-页面配置-界面显示部分配置项 singlePage 小结: 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置. 页面中配置项在当前页面会覆盖 app.json 的 ...
微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...

微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案

代码：

微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案相关推荐

最新文章

热门文章

微信小程序 页面除去头部和底部，中间高度铺满剩余部分的解决方案

代码：

微信小程序 页面除去头部和底部，中间高度铺满剩余部分的解决方案相关推荐

最新文章

热门文章

微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案

微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案相关推荐