微信小程序中scoll-view的一个小坑
在微信小程序开发中,有时候swiper-view
会出现显示不全的问题,我们可以用scoll-view
来把它包裹下,但是要用scoll-view就一定要设置height
,而我们经常是在页面中加的这个组件,要怎么知道它的高度呢?我找了好多答案,最终就整理如下:
- 整理下思路:就是在页面加载后去计算出页面中已知组件的所有高度和,然后再用页面整体大小减去这个高度和。
- 先讲一下如何获取页面总体高度吧。可以用
wx.getSystemInfo(Object object)
或wx.getSystemInfoSync(Object object)
这两个官方的API,参考官方文档
- 然后就是如何获取页面已知元素的高度和了。思路就是:选择页面中占有效高度的元素(也就是说一般只选最外层元素,不包含内容元素)。
- 关于这点,官方给的文档太过简略,对于我这样的前端新手根本学不会,所以只好百度了,找了一篇好文章可参考这里*
我只写上我的代码
onLoad:function(){
let page = this;//保存当前页面到page对象中,因为后边要是直接用this,就不是当前page对象了
//创建节点查询对象
let obj = wx.createSelectorQuery();
//选择页面中占有效高度的元素,这个select()里边写的是css的选择器
//boundingClientRect()是取得元素的信息,但这里只是写了命令,放到exec()中批处理
obj.select(".topbar").boundingClientRect();
obj.select(".top_message").boundingClientRect();
obj.select(".title").boundingClientRect();
obj.select(".linebetween").boundingClientRect();
//exec(callbackFunction(){}),意思是执行上边的代码
obj.exec((res) => {
for (let i = 0; i < res.length; i++) {
//批量执行完上边的代码后会产生一个数组,一次对应上边命令返回的对象
eleHeight += res[i].height;
console.log(res[i].height);
}
//给页面变量赋值
page.setData({
scroll_height: (page.data.winHeight - eleHeight - 50-20)*2
})
}
微信小程序中scoll-view的一个小坑的更多相关文章
- 微信小程序中跳转另一个小程序
wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', / ...
- 微信小程序中的app.js-清除缓存
微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 第一个微信小程序(实现点击一个按钮弹出toast)
今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序中的 hover-class
微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button ...
随机推荐
- SpringBoot:elasticSearch 7.2.0 Java High Level REST Client 搜索 API
Springboot整合最新版elasticSearch参考之前的文章:SpingBoot:整合ElasticSearch 7.2.0 Search API SearchRequest用于与搜索文档, ...
- 学会了这些技术,你离BAT大厂不远了
每一个程序员都有一个梦想,梦想着能够进入阿里.腾讯.字节跳动.百度等一线互联网公司,由于身边的环境等原因,不知道 BAT 等一线互联网公司使用哪些技术?或者该如何去学习这些技术?或者我该去哪些获取这些 ...
- 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(2)-业务项目搭建
本节将介绍如何进行业务项目搭建. 本业务项目示例是简单的企业信息管理功能,业务项目采用Code First方式,搭建包括: 创建实体项目 创建实体数据表映射 创建业务处理项目 创建业务Web项目 搭建 ...
- unity_实用小技巧(空指针错误)
在游戏开发中,空指针错误是我们最常见也是最容易出现的错误.下面介绍一下博主近期遇见的空指针错误 如上图,有两个类,如果此时我们在图2中调用图1的单例模式可能会出现空指针错误. 原因在于:编译器可能先执 ...
- Leetcode之二分法专题-162. 寻找峰值(Find Peak Element)
Leetcode之二分法专题-162. 寻找峰值(Find Peak Element) 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1] ...
- 原生js之Ajax
1.什么是Ajax? 全称:Asynchronous JavaScript and XML (异步的 JavaScript和 xml),是前后端数据交互的一种技术(前端通过 Ajax 发送http请 ...
- Delphi - 通过WinAPI WinExec直接调用系统工具
看如下代码: WinExec('mspaint.exe', SW_SHOWNORMAL); // SW_SHOWNORMAL = 1 系统画图 WinExec('write.exe', SW_SHOW ...
- C#开发BIMFACE系列16 服务端API之获取模型数据1:查询满足条件的构件ID列表
系列目录 [已更新最新开发文章,点击查看详细] 源文件/模型转换完成之后,可以获取模型的具体数据.本篇介绍根据文件ID查询满足条件的构件ID列表. 请求地址:GET https://api.b ...
- SPOJ - QTREE5 Query on a tree V 边分治
题目传送门 题意:给你一棵树, 然后树上的点都有颜色,且原来为黑,现在有2个操作,1 改变某个点的颜色, 2 询问树上的白点到u点的最短距离是多少. 题解: 这里用的还是边分治的方法. 把所有东西都抠 ...
- CodeForces div3 第一场
A Wrong Subtraction 题意: 对于一个数操作n次,操作如下: 如果末尾是0就将这个数除以10, 如果末尾不是0就将这个数-1, 直接做就好了. 代码: #include<bit ...