À quoi sert la page Uni-App ?

Le module de page

uni-app fournit des méthodes pour contrôler la page. Les méthodes d'utilisation sont : 1. "page.$('.index-desc')"; " ;3. "attendre page.waitFor('picker')" et ainsi de suite.

L'environnement d'exploitation de cet article : système Windows 7, uni-app version 2.5.1, ordinateur DELL G3

À quoi sert la page uni-app ?

Page d'uni-app——Méthodes pour contrôler la page

Le module Page fournit des méthodes pour contrôler la page. Propriétés de la page

Chemin de la page

StringObjet Données de rendu de la pageMéthode PageméthodeParamètresDescriptionValeur de retour

queryParamètre de la page	data	Object

$Élément<code>(sélecteur : chaîne)Attendez que la condition soit vraie<code><code>void

<code>(sélecteur : chaîne)Obtenir l'élément de page	$$	Obtenir le tableau d'éléments de page<code>Element[]	waitFor <code><code>(condition : chaîne | numéro | Fonction)
	<code>(selector: string)	获取页面元素	Element
$$	<code>(selector: string)	获取页面元素数组	<code>Element[]
waitFor	<code><code>(condition: string | number | Function)	等待直到条件成立	<code><code>void
data	<code><code><code>(path?: String)	获取页面渲染数据	<code><code><code>Object
setData	<code><code><code><code><code><code><code>(data: Object)	设置页面渲染数据	<code><code><code>Object
size	<code><code><code><code><code><code><code>无	获取页面的大小	<code><code><code>Object
scrollTop	<code><code><code><code><code><code><code>无	获取页码滚动位置	<code><code><code>Number
callMethod	<code><code><code><code><code><code><code><code>(method: string, ...args: any[])	调用页面的指定方法	<code><code><code>any

page.$()方法

$()方法用于获取页面的元素。$方法的输入参数说明：

字段	类型	必填	默认值	说明
selector	String	是		选择器

示例代码如下：

1 const page = await program.currentPage()
2 const element = await page.$('.index-desc')
3 console.log(element.tagName) // 'view'

 page.$$()方法

$$()方法用于获取页码元素数组。$$方法的输入参数说明：

setData

字段	类型	必填	默认值	说明
selectordata	<code><code><code>(chemin ? : chaîne) code>	Obtenir les données de rendu de page	<code><code><code>Objet

<code><code><code><code><code>(données : Objet) code>🎜🎜Définir les données de rendu de page🎜🎜<code><code><code>Objet🎜🎜🎜 🎜taille🎜 🎜<code><code><code><code><code><code><code>Aucun 🎜🎜Obtenir la taille de la page🎜🎜<code><code><code>Objet 🎜🎜🎜🎜scrollTop 🎜🎜<code><code><code><code><code><code><code>Aucun code>🎜🎜Obtenir la position de défilement du numéro de page🎜🎜<code><code><code>Numéro🎜🎜🎜🎜 callMethod🎜🎜<code><code><code><code><code><code><code><code>(méthode : chaîne, ...args : any[] ) code>🎜🎜Appelez la méthode spécifiée sur la page🎜🎜<code><code><code>n'importe quelle🎜🎜🎜🎜

méthode page.$()

$() Méthode utilisée pour récupérer les éléments de la page. Description du paramètre d'entrée de la méthode $ : 🎜🎜🎜🎜🎜🎜🎜Field🎜🎜🎜🎜🎜🎜Type🎜🎜🎜🎜🎜🎜Required🎜🎜🎜🎜🎜🎜Valeur par défaut🎜 🎜 🎜🎜🎜🎜Instructions🎜🎜🎜🎜🎜 🎜 selector🎜🎜String🎜🎜 est le 🎜🎜 🎜🎜selector🎜🎜🎜🎜

L'exemple de code est le suivant : 🎜

1 const page = await program.currentPage()
2 const elements = await page.$$('.list-text')
3 console.log(elements.length)

🎜 page.$$ () Méthode 🎜La méthode

$$() est utilisée pour obtenir le tableau d'éléments du numéro de page. Description du paramètre d'entrée de la méthode $$ : 🎜🎜🎜🎜🎜🎜🎜Field🎜🎜🎜🎜🎜🎜Type🎜🎜🎜🎜🎜🎜Required🎜🎜🎜🎜🎜🎜Default value🎜 🎜 🎜🎜🎜🎜Instructions🎜🎜🎜🎜 🎜 🎜sélecteur🎜🎜String🎜🎜 est 🎜🎜 🎜🎜sélecteur🎜🎜🎜🎜

示例代码如下：

1 const page = await program.currentPage()
2 const elements = await page.$$('.list-text')
3 console.log(elements.length)

Page.waitFor()方法

waitFor()方法用于等待直到条件成立。waitFor方法参数说明

字段	类型	必填	默认值	说明
condition	String Number Function	是		等待条件

• 如果条件是string类型时，那么该参数会被当成选择器，当该选择器选中元素个数不为零时，结束等待。
• 如果条件是number，那么该参数会被当成超时时长，当经过指定时间后，结束等待。
• 如果条件是FUnction类型，那么该参数会被当成断言函数，当该函数返回真时，结束等等。

示例代码如下：

1 const page = await program.currentPage() await page.waitFor(5000) // 等待 5 秒
2 await page.waitFor('picker') // 等待页面中出现 picker 元素
3 await page.waitFor(async() = >{
4     return (await page.$$('picker')).length > 5
5 })； // 等待页面中 picker 元素数量大于 5

Page.data()方法

data()方法用于获取页码数据。data()方法参数如下：

字段	类型	必填	默认值	说明
path	String	否		数据路径

示例代码如下：

1 const page = await program.currentPage();
2 console.log(await page.data('list'));

Page.setData（）方法

setData()方法用于设置页面的渲染数据。setData()方法参数如下：

字段	类型	必填	默认值	说明
data	Object	是		要改变的数据

示例代码如下：

1 const page = await program.currentPage();
2 await page.setData({
3     text: 'changed data'4 });

Page.size()方法

size()方法获取页面的大小。size()的返回值如下：

字段	类型	说明
width	number	页面可滚动宽度
height	number	页面可滚动高度

Page.callMethod（） 方法

callMethod()方法用于调用页面的指定方法。callMethod()的参数说明如下：

字段	类型	必填	默认值	说明
method	String	是	-	需要调用的方法名
...args	array	否	-	方法参数

推荐学习：《uni-app教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!