view style='width:100%;height:80rpx;' id='navigation'></view>
wx.createSelectorQuery().select('#navigation').boundingClientRect(function (rect) {
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()

微信小程序监听view到顶部的高度的更多相关文章

  1. 微信小程序监听input输入并取值

    小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...

  2. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  3. 小程序监听-data 或者 子组件properties 数据

      observers: {     'plateInfo': (obj) => {       console.log('监听', obj)       if(Object.keys(obj) ...

  4. 微信小程序 image图片组件实现宽度固定 高度自适应

    给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...

  5. 微信小程序中两种回到顶部按钮的效果实现

    一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...

  6. 微信小程序 JS 获取View 和 屏幕相关属性（高度、宽度等等）

    wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...

  7. 微信小程序 Image 图片实现宽度100%，高度自适应

    做法如下: 样式设置宽度100%, .img{ width:100%;} 添加属性 mode="widthFix", <image class="img" ...

  8. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

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

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

  10. 微信小程序学习心得

    我们写小程序时都要跳转页面的,也会有底部导航来进行切换 这个时候就要介绍下窗口是怎样配置的 要在app.json文件里写一个tabBer对象 里面在定义一个list数组里面放我们定义的几个需要切换的页 ...

随机推荐

  1. pat 乙级1024 科学计数法关于stl中size()的一些思考即测试点六，无符号整数问题

    来,先看题目:1024 科学计数法 分数 20 作者 HOU, Qiming 单位 浙江大学 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9 ...

  2. 修复gitlab权限(docker方式搭建)

    docker exec -it gitlab update-permissions docker restart gitlab

  3. WPF 打印界面控件内容

    public class PrintDialogHelper { private const string PrintServerName = "DESKTOP-49LV5U6"; ...

  4. 【C学习笔记】day3-1 将数组A中的内容和数组B中的内容进行交换。（数组一样大）

    #include <stdio.h> int main() { int a[5]; for (int i = 0; i < 5; i++) { scanf_s("%d&qu ...

  5. springboot AOP配置

    在Springboot中添加AOP配置分两步: 最近学习AOP ,记录一下,虽然很多名字不太清楚,但是问题不大 1:在pom.xml中添加AOP依赖 2:建一个AOP配置类 下面来看下代码是怎么实现的 ...

  6. k8s ingress 报错整理

    问题: Error from server (InternalError): error when creating "ingress-rules-demo1.yaml": Int ...

  7. 七、25.创建user子分支并把代码推送到码云仓库中

    打开终端点击+新建一个终端 注意 :如下操作都是在2:powershell下进行 先来检查一下当前所处分支 git branch 我们应该把这些代码都写到user分支上 接下来应该把这些代码统一迁移到 ...

  8. Launchpad是什么？Launchpad使用教程

    ​ Launchpad是什么?Launchpad 是用来查找和打开Mac系统下的 app 的最快捷方式,通过 Launchpad,您可以查看.整理并轻松打开Mac里面几乎所有的应用软件.下面带来Mac ...

  9. 蓝牙mesh组网实践（手机配网例程配合wch mesh手机app的使用）

    目录 CH582的官方EVT在22年7月更新后,修改了手机配网代码以支持wch mesh手机app.使用该app可以保存手动配网信息,设置订阅地址分组,OTA升级,极大方便了用户管理节点. 老版本的E ...

  10. harbor 修改主机地址

    harbor 修改主机地址 1 # cd /var/lib/wise2c/harbor/harbor 2 # docker-comppose down 3 # vi harbor.cfg 4 host ...