小程序:获取页面高度问题

背景
最近在和同伴一起做小程序，发现用swiper实现滑动栏会出现中间无内容却能滑动现象，用scroll-view需要获取高度才能适用

如果对小程序滑动块不了解的，可以到微信小程序组件-试图容器了解

如图所示，列表内没有内容，却产生了滚动条

解决方案
经过多次的查找和修改，找到了一下方案供参考
改善后页面舒服了许多，没有丑陋的滚动条的存在，显得整个页面不尴尬了！！

获取高度JS代码：

 // 获取页面高度var query = wx.createSelectorQuery();query.select('.类名').boundingClientRect(function(rect) {that.setData({height: rect.height,})}).exec();//不滑动页面的高度wx.getSystemInfo({success: function(res, rect) {that.setData({allHeight: res.windowHeight })}})

获取组件块的高度

获取不滑动高度HTML

//获取顶部高度
<view class='search' style='height:{{height}}'><view class='search-input'><input class='search-text' placeholder='输入房间号进入赛事，或输入辩题搜索录音' placeholder-class='place-holder' /><!-- 发布 --><view class='search-right' bindtap='showModal'><!-- <text>发布</text> -->发布</view></view>

不滑动内容HTML 用整个页面的高度-不滑动页面高度=滑动页面高度

 <swiper-item><scroll-view scroll-y="true" style="height:{{allHeight-height}}px">//代码内容</scroll-view></swiper-item>

小小的尾巴
本人也是刚学前端，接触小程序的时间也不长，可能以上写的东西还有问题，请各路英雄多多指教！小弟在此先谢谢了！

小程序:获取页面高度问题相关推荐

微信小程序获取页面高度
watchHeight() {var query = wx.createSelectorQuery()//.box为指定类名高度query.select('.box').boundingClientR ...
微信小程序获取视口高度,设置 video 视频全屏显示
微信小程序获取视口高度获取视口高度可用于设置视频全屏显示效果及其他效果显示 js中:(可以在onLoad中直接使用,或写入方法中) let that = this;// 获取系统信息wx.ge ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
微信小程序获取滚动条高度_小程序页面获取滚动条高度
没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来想要做的效果是很常见的滚动条超出某个元素时,该元素固定在顶部网上看到的获取滚动条高度及返回顶 ...
微信小程序获取滚动条高度_小程序超过高度加滚动条小程序尺寸规范
DW里如何设置自适应屏幕高度,且内容超出时出现滚动条? 首先:打开DW并创建一个新的HTML页面.第二:为它的页面写一个div,类pingmu.第三,保存这个文件.第四:创建一个新的类样式,并为其Di ...
uniapp微信小程序获取页面二维码（带有参数）
1. 生成页面二维码(后端生成,前端需要将二维码写入文件管理器) // 获取带参数的小程序码async function getCodeImage() {let param = { id: 12345 ...
微信小程序获取页面栈
let pages = getCurrentPages(); //获取当前页面信息栈 let prevPage = pages[pages.length-2] //获取上一个页面信息栈页面的信息栈包 ...
微信小程序获取状态栏高度
// 获取导航栏高度wx.getSystemInfo({success: res=>{let custom = wx.getMenuButtonBoundingClientRect();this ...
微信小程序获取头部高度
// 获取设备信息wx.getSystemInfo({success: e => { // { statusBarHeight: 20, ... },单位为 px// 获取右上角胶囊的位置信息l ...

小程序:获取页面高度问题

小程序:获取页面高度问题相关推荐

最新文章

热门文章