uniApp -- notes d'étude (vue3+ts)

1. À propos des informations sur le nœud d'interface 15 juin

Présentation du site officiel d'UniApp

(1) Ma compréhension personnelle est que le site officiel renvoie une SelectorQuery instance d'objet. Et vous pouvez utiliser select et d'autres méthodes pour sélectionner des nœuds sur cette instance, et utiliserboundingClientRect et d'autres méthodes pour sélectionner les informations qui doivent être interrogées. Mais si vous avez besoin d'obtenir des informations à ce sujet, vous pouvez uniquement les imprimer.

,
l'appel onReady let selectorQuery: UniNamespace.SelectorQuery = uni.createSelectorQuery();renvoie le résultat indiqué ci-dessus, mais je ne comprends toujours pas de quoi il s'agit. Si, selon le site officiel, un SelectorQuerysélecteur d'objet de requête est renvoyé.

Cependant, il y a quelques points à noter à ce sujet : l'utilisation uni.createSelectorQuery()doit mounted être appelée après le cycle de vie, c'est-à-dire une fois l'arborescence DOM terminée.

---

(2) Puis, après avoir obtenu ce SelectorQuery, il a donné quelques méthodes et exemples :

   interface SelectorQuery {
    
    
        /**
         * 将选择器的选取范围更改为自定义组件component内默认本页
         */
        in(component: any): SelectorQuery;
        /**
         * 在当前页面下选择第一个匹配选择器selector的节点
         */
        select(selector: string): NodesRef;
        /**
         * 在当前页面下选择匹配选择器selector的所有节点
         */
        selectAll(selector: string): NodesRef;
        /**
         * 选择显示区域
         */
        selectViewport(): NodesRef;
        /**
         * 执行所有的请求
         */
        exec(callback?: (result: any) => void): NodesRef;
    }

Ces quatre méthodes et quelques commentaires sont donnés

1. Modifiez la plage de sélection du sélecteur dans le composant de composant personnalisé et renvoyez une instance d'objet SelectorQuery. (Au départ, le sélecteur sélectionne uniquement les nœuds dans la plage de pages et ne sélectionnera aucun nœud dans le composant personnalisé. L'applet Alipay ne prend pas en charge in(component) et son utilisation n'a aucun effet. Un exemple est également donné.

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
    
    
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

2. Sélectionnez le premier nœud correspondant au sélecteur sur la page actuelle et renvoyez une instance d'objet NodesRef, qui peut être utilisée pour obtenir des informations sur le nœud. La syntaxe suivante est prise en charge.

Sélecteur d'ID : #the-id
sélecteur de classe (plusieurs peuvent être spécifiés consécutivement) : .a-class.another-class
sélecteur d'élément enfant : .the-parent > .the-child
sélecteur descendant : .the-ancestor .the-descendant
sélecteur descendant entre composants personnalisés : .the-ancestor >>> .the-descendant
union de plusieurs sélecteurs :#a-node, .some-other-nodes

3. Sélectionnez tous les nœuds correspondant au sélecteur sur la page actuelle selectoret renvoyez une NodesRef instance d'objet, qui peut être utilisée pour obtenir des informations sur le nœud.
4. Sélectionnez la zone d'affichage, qui peut être utilisée pour obtenir la taille, la position de défilement et d'autres informations de la zone d'affichage, et renvoyez une instance d'objet NodesRef.
5. Exécutez toutes les demandes. Les résultats de la requête sont formés dans un tableau dans l'ordre de la requête et callbackrenvoyés dans le premier paramètre.

C'est ce que dit le site officiel. Cela semble déroutant, mais vous pouvez obtenir des informations clés. Pour obtenir le sélecteur, pour obtenir un certain niveau de composants, ou un sélecteur pour une partie ou une zone de la page entière, plusieurs des méthodes ci-dessus sont proposées.

(3) Ce dont j'ai besoin, c'est de comprendre les fonctions de ces méthodes. Cette colonne est de comprendre le sélecteur uni et de concevoir les exigences du scénario d'utilisation. En fait, les informations qui peuvent être obtenues à partir du document sont la surcharge de ces méthodes . Sélectionnez un nœud, sélectionnez tous les nœuds d'une classe, sélectionnez une certaine zone, appelez exec une méthode pour faire une requête, il sera alors facile de le gérer après avoir compris sa méthode de traitement et démarrez un test.

Vous pouvez obtenir les informations de coordonnées du nœud correspondant left":0,"right":8.40625,"top":119,"bottom":139,"width":8.40625,"height":20

En fait, l'essentiel est d'obtenir ces données, qui seront plus faciles à comprendre plus tard. Par exemple, selectAll consiste à obtenir toutes les informations sur le nœud tant que la classe ou l'identifiant, et les données sont les informations sur la position du nœud du tableau. . Ensuite, vous pouvez effectuer un traitement sur ces données.