在微信小程序开发中,有时候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的一个小坑的更多相关文章

  1. 微信小程序中跳转另一个小程序

    wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', / ...

  2. 微信小程序中的app.js-清除缓存

    微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...

  3. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  4. 第一个微信小程序(实现点击一个按钮弹出toast)

    今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...

  5. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  6. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  7. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  8. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  9. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  10. 微信小程序中的 hover-class

    微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button ...

随机推荐

  1. Unity 自定义Inspector面板时的数据持久化问题

    自定义Inspector面板的步骤: Unity内创建自定义的Inspector需要在Asset的任意文件夹下创建一个名字是Editor的文件夹,随后这个文件夹内的cs文件就会被放在vstu生成的Ed ...

  2. Java并发编程知识点总结Volatile、Synchronized、Lock实现原理

    Volatile关键字及其实现原理 在多线程并发编程中,Volatile可以理解为轻量级的Synchronized,用volatile关键字声明的变量,叫做共享变量,其保证了变量的“可见性”以及“有序 ...

  3. Liunx学习总结(四)--文件的权限管理

    文件和目录的权限 每个文件都有其所有者(u:user).所属组(g:group)和其他人(o:other)对它的操作权限,a:all则同时代表这3者.权限包括读(r:read).写(w:write). ...

  4. MySQL之修改默认引擎和字符集

    一.数据库引擎 1.1 查看数据库引擎 mysql> show engines; +--------------------+---------+------------------------ ...

  5. Vue+webpack项目的多环境打包配置

    背景:由于需要将应用部署到线上开发环境.线上测试环境.线上预发环境.线上生产环境,而每个环境的访问地址是不同的.如果每次更改请求地址未免有些繁琐,就考虑在本地进行一次性配置. 代码管理工具:git 代 ...

  6. vue 自动化路由实现

    1.需求描述 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue ...

  7. Netty源码分析 (二)----- ServerBootstrap

    BootStrap在netty的应用程序中负责引导服务器和客户端.netty包含了两种不同类型的引导: 1. 使用服务器的ServerBootStrap,用于接受客户端的连接以及为已接受的连接创建子通 ...

  8. 从入门到入土的JS 随笔day02 新手向

    讲讲自增自减和循环语句及三元一次表达式: 一.自增自减实际上就是按照顺序来解读代码, 例如,a++;代表了a先进行了计算,运算完毕后,才进行增加: ++a呢,则是先进行了自增,值加一后再进行运算: 如 ...

  9. 主席树区间第K大

    主席树的实质其实还是一颗线段树, 然后每一次修改都通过上一次的线段树,来添加新边,使得每次改变就改变logn个节点,很多节点重复利用,达到节省空间的目的. 1.不带修改的区间第K大. HDU-2665 ...

  10. codeforces 747D. Winter Is Coming(贪心)

    题目链接:http://codeforces.com/problemset/problem/747/D 题意:冬天有n天,冬天用的轮胎总共能用k天,一开始车子用的是夏天的轮胎. 给出n天的平均气温,温 ...