wx.createSelectorQuery()在components获取Dom节点的使用

最新推荐文章于 2024-07-19 14:44:26 发布

原创最新推荐文章于 2024-07-19 14:44:26 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍在小程序中如何利用wx.createSelectorQuery方法获取指定ID的DOM节点，并通过实例演示了如何获得节点的上边界坐标。

1、在components获取Dom节点的使用

const query = wx.createSelectorQuery().in(this)
query.select('#the-id').boundingClientRect(function(res){
      res.top // 这个组件内 #the-id 节点的上边界坐标
    }).exec()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

紫轩阁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【愚公系列】《微信小程序与云开发从入门到实践》030-关于自定义组件的高级用法

时光隧道

09-16

9万+

在微信小程序的开发中，自定义组件是实现灵活、可复用代码的重要工具。随着小程序生态的不断发展，开发者对于组件的需求也日益增长，从基础的组件使用到高级的技巧与模式，掌握自定义组件的高级用法已成为提升开发效率和用户体验的关键所在。本文将深入探讨微信小程序中自定义组件的高级用法，包括组件之间的通信、生命周期管理、插槽机制、样式封装等内容。我们将通过实际案例和最佳实践，帮助您更好地理解和应用这些高级功能，从而为您的项目带来更高的灵活性和可维护性。

微信小程序操作dom元素节点 wx.createSelectorQuery()

王湘佰的博客

06-23

1955

WXML <view> <text class="title" id="productServe">产品服务</text> <text class="title" id="enterpriseServe">企业服务</text> <text class=...

参与评论您还未登录，请先登录后发表或查看评论

wx.createSelectorQuery().select微信小程序获取dom节点位置

hangGe0111的博客

12-27

3902

1.场景：在某些情况下需要用到某个元素距离顶部的距离。 1.1场景一：例如在某些小程序的详情页，由于页面展示的内容特别多，页面有好几屏的高度，辣么庞大的数据量，放在一个接口里显然是不合理的（小程序setData有1024大小限制；如果数据太大请求时间会比较长用户的页面等待时间特别长，总之一句话用户体验不好），所以就需要把接口分开为几个，同时小程序对于页面的进程数有限制（好像是5个还是几个...

uni.createSelectorQuery()节点信息使用

SC_buyan的博客

07-19

1518

uni.createSelectorQuery() 节点返回值为null

小程序通过wx.createSelectorQuery操作DOM节点来在页面某处显示内容

hql1024的博客

06-10

1273

可以先复制代码到页面查看效果 <scroll-view scroll-y='true' style="height:100vh;" bindscroll="bindscroll" scroll-into-view="{{toview}}"> <view class="rol"> <text class="title" id="normalServe">常用应用</text> <text class="title" id="normalServe

微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

qq_35248327的博客

03-20

2829

微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

微信小程序自定义组件使用wx.createSelectorQuery()获取不到节点问题

S筱潇S四维Smile

08-19

3514

微信小程序自定义组件使用wx.createSelectorQuery()获取不到节点问题

如何用wx.createSelectorQuery精准控制小程序锚点跳转？

本文系统分析了锚点跳转的核心需求与典型应用场景，深入解析 wx.createSelectorQuery 的设计原理、API 机制及其在元素查询与几何信息获取中的关键作用。针对动态渲染、多层级结构等常见问题，提出了基于选择器查询与...

<template> <view class="model-container"> <canvas canvas-id="modelCanvas" type="webgl" id="modelCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" ></canvas> </view> </template> <script> import * as THREE from 'threejs-miniprogram'; import { GLTFLoader } from '@/pagesB/three/gltf-loader.js'; export default { props: { modelUrl: String, // GLB模型URL canvasWidth: { type: Number, default: 300 }, canvasHeight: { type: Number, default: 300 } }, data() { return { renderer: null, scene: null, camera: null, model: null, animationId: null }; }, mounted() { this.initScene(); this.loadModel(); }, beforeDestroy() { // 清理资源防止内存泄漏 cancelAnimationFrame(this.animationId); if (this.renderer) this.renderer.dispose(); }, methods: { async initScene() { // 获取Canvas节点 const canvasNode = await new Promise(resolve => { const query = uni.createSelectorQuery().in(this); query.select('#modelCanvas').node(res => resolve(res.node)).exec(); }); // 初始化Three.js场景 this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xf0f0f0); // 初始化相机 this.camera = new THREE.PerspectiveCamera( 75, this.canvasWidth / this.canvasHeight, 0.1, 1000 ); this.camera.position.set(0, 0, 5); // 初始化渲染器 this.renderer = new THREE.WebGLRenderer({ canvas: canvasNode, antialias: true, alpha: true }); this.renderer.setSize(this.canvasWidth, this.canvasHeight); this.renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // 添加光源 const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(1, 1, 1); this.scene.add(directionalLight); }, loadModel() { const loader = new GLTFLoader(); // 加载进度回调（可选） loader.manager.onProgress = (url, loaded, total) => { console.log(`加载进度: ${Math.round(loaded/total * 100)}%`); }; loader.load( this.modelUrl, gltf => { this.model = gltf.scene; this.scene.add(this.model); // 居中模型 const box = new THREE.Box3().setFromObject(this.model); const center = box.getCenter(new THREE.Vector3()); this.model.position.sub(center); // 自动旋转模型 this.animateModel(); }, undefined, error => { console.error('GLB模型加载失败:', error); uni.showToast({ title: '模型加载失败', icon: 'none' }); } ); }, animateModel() { const animate = () => { this.animationId = requestAnimationFrame(animate); if (this.model) { this.model.rotation.y += 0.01; // 缓慢旋转模型 } this.renderer.render(this.scene, this.camera); }; animate(); } } } </script> <style scoped> .model-container { display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; border-radius: 12rpx; overflow: hidden; } </style>uniapp开发微信小程序报错，请使用vue2版本修改，并实现组件化

最新发布

09-14

在`initScene`方法中，我们使用了`uni.createSelectorQuery().in(this)`来查询当前组件内的节点，这是正确的。 5. 代码中有一个异步初始化场景的过程，使用了Promise来获取canvas节点。这里确保在节点可用后才...

在uniapp开发支付宝小程序使用echarts

08-27

- 修改js中的微信小程序API为支付宝小程序API（例如：`wx.createCanvasContext`改为`my.createCanvasContext`，`wx.createSelectorQuery`改为`my.createSelectorQuery`等） 4. 在页面中引入并使用。由于改写...

微信开发中，已经在组件定义了wx:ref 但是在onReady中调用this.$refs.photoAudit2.setValue(this.formValue.images2) 总是显示setValue is not a function

07-11

这是最常见的场景：你写了一个自定义组件 `PhotoAudit`，并在父组件中通过 `wx:ref` 引用了它，但你忘记在子组件中定义 `setValue` 方法。 #### 示例子组件代码： ```js // components/photo-audit/photo-audit.js...

微信小程序组件中createSelectorQuery().select()结果为null

weixin_44646763的博客

08-23

3828

组件中createSelectorQuery().select()结果为null

解决使用wx.createSelectorQuery()获取不到元素

gurenchang的博客

03-07

2399

解决使用wx.createSelectorQuery()获取不到元素

微信小程序基础 - 16 （自定义组件Component）

欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~

12-07

650

如何自定义组件? 1.新建Component. 与Page类似，包含四件套. 2.在.json中编写组件声明： { "component": true } 3.编写组件基础的wxml / wxss 4.在普通页面中，引入该组件，使用该组件. { "usingComponents": { "mybutton": "path/to/the/custom/component" } } <mybutton&...

微信小程序(四) 节点查询 | wx.createSelectorQuery

看客

09-15

1万+

createSelectorQuery createIntersectionObserver 节点查询

微信小程序获取页面节点方法简介。canvas 滑动验证码（前段,微信小程序，canvas2D）

weixin_52618969的博客

07-11

7699

微信小程序获取页面节点方法简介。 canvas 滑动验证码实例（微信小程序，canvas2D）

[微信小程序]wx.createSelectorQuery()获取页面或组件中界面上的节点信息