微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery
节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置。
示例代码:
- const query = wx.createSelectorQuery()
- query.select('#the-id').boundingClientRect(function(res){
- res.top // #the-id 节点的上边界坐标(相对于显示区域)
- })
- query.selectViewport().scrollOffset(function(res){
- res.scrollTop // 显示区域的竖直滚动位置
- })
- query.exec()
上述示例中, #the-id
是一个节点选择器,与 CSS 的选择器相近但略有区别,请参见 SelectorQuery.select 的相关说明。
在自定义组件或包含自定义组件的页面中,推荐使用 this.createSelectorQuery
来代替 wx.createSelectorQuery ,这样可以确保在正确的范围内选择节点
将选择器的选取范围更改为自定义组件 component
内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
注:在小程序组件的ready生命周期中进行调用,即可获取节点信息。
- Component({
- methods: {
- queryMultipleNodes (){
- const query = wx.createSelectorQuery().in(this)
- query.select('#the-id').boundingClientRect(function(res){
- res.top // 这个组件内 #the-id 节点的上边界坐标
- }).exec()
- }
- },
- lifetimes: {
- attached: function () {
- // 在组件实例进入页面节点树时执行
- },
- detached: function () {
- // 在组件实例被从页面节点树移除时执行
- },
- ready: function(){
- console.log('ready');
- this.queryMultipleNodes ();// 获取节点信息
- }
- },
- })
参考:
获取节点信息:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/selector.html
组件中获取节点信息:
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.in.html
组件生命周期:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery的更多相关文章
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 微信小程序image组件中aspectFill和widthfix模式应用详解
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来.也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发 ...
- 微信小程序~App.js中获取用户信息
(1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...
- 微信小程序,内容组件中兼容的H5组件
受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a abbr address article aside b bdi bdo ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
随机推荐
- Flutter生成带图片的二维码
现在的APP中经常需要用自己的信息生成一个二维码给别人扫,下面就介绍一下Flutter中怎么生成一个带图片的二维码. 需要用到的插件qr_flutter 首先在 pubspec.yaml 文件中添加以 ...
- Flutter移动电商实战 --(14)首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- linux下什么工具可以用来纠正文件中的拼写和排版错误?
答: ispell,官网在此
- C++内容记录
仅个人记录 https://ke.qq.com/course/336509 M了个J - 博客园 https://www.cnblogs.com/mjios/
- android studio gradle国内代理设置
android studio在开始都各项目之前都会遇到 gradle 的同步,而在同步过程中很多依赖下载特别慢甚至出现无法现在的情况,有的时候等的时间特别长,甚至要一天,关键是等了大半天之后突然报错, ...
- Kotlin中反射
枚举类成员 import kotlin.reflect.full.memberFunctions import kotlin.reflect.full.memberProperties fun mai ...
- [Scikit-learn] 2.3 Clustering - kmeans
参考: 2.3. Clustering 2.4. Biclustering 2.1.2.3. The Dirichlet Process Clusering, GMM, Variational Inf ...
- GO 语言常用排序
1. 冒泡排序(bubble sort)的基本思想:比较相邻两个 元素的关键字值,如果反序,则交换 func BubbleSort(arr []int) { flag := false //外层控制行 ...
- Excel转html工具类
有时需要将Excel展示在页面上,所以需要将Excel转化为html,这里封装一个工具类. Excel和servlet访问效果如下图示: 工具类代码: POIReadExcelToHtmlUtil.j ...
- iOS自定义下拉列表
实现效果如下: 点击导航栏的“点击”,弹出下拉列表. 注意:绿色的是控制器的view背景,又一个遮罩层,点击可以隐藏列表. Github地址: https://github.com/PengSiSi/ ...