Wozu dient die Uni-App-Seite?

uni-app-Seitenmodul bietet Methoden zur Steuerung der Seite. Die Verwendungsmethoden sind: 1. "page.$('.index-desc')" 2. "page.$$('.list-text') " ;3. "await page.waitFor('picker')" und so weiter.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Uni-App-Version 2.5.1, DELL G3-Computer

Was ist die Verwendung der Uni-App-Seite?

Seite der Uni-App – Methoden zur Steuerung der Seite

Das Seitenmodul bietet Methoden zur Steuerung der Seite.

Seiteneigenschaften

Eigenschaft	Beschreibung	Rückgabetyp
Pfad	Seitenpfad	String
Abfrage	Seitenparameter	Objekt
Daten	Rendering-Daten der Seite	Objekt

Seitenmethode

Methode	Parameter	Beschreibung	Rückgabewert
$	<code>(selector: string)<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.$$()方法

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

Holen Sie sich das SeitenelementElement$$<code>(selector: string)Holen Sie sich das Seitenelement-Array

字段	类型	必填	默认值	说明
selector

🎜<code>Element[]🎜🎜🎜🎜waitFor 🎜 🎜<code><code>(condition: string | number | Function)🎜🎜Warten Sie, bis die Bedingung wahr ist🎜🎜<code><code>void🎜🎜🎜🎜data🎜🎜<code><code><code>(path?: String) code>🎜🎜Seitenrenderingdaten abrufen🎜🎜<code><code><code>Object🎜🎜🎜🎜setData🎜🎜<code><code><code><code><code>(data: Object) code>🎜🎜Seitenrenderingdaten festlegen🎜🎜<code><code><code>Objekt🎜🎜🎜 🎜Größe🎜 🎜<code><code><code><code><code><code><code>Keine 🎜🎜Ermitteln Sie die Größe der Seite🎜🎜<code><code><code>Objekt 🎜🎜🎜🎜scrollTop 🎜🎜<code><code><code><code><code><code><code>Keine code>🎜🎜Ermitteln Sie die Bildlaufposition der Seitenzahl🎜🎜<code><code><code>Nummer🎜🎜🎜🎜 callMethod🎜🎜<code><code><code><code><code><code><code><code>(method: string, ...args: any[] ) code>🎜🎜Rufen Sie die angegebene Methode auf der Seite auf🎜🎜<code><code><code>any🎜🎜🎜🎜

page.$() Methode

$() Methode zum Abrufen der Elemente der Seite. Eingabeparameterbeschreibung der $-Methode: 🎜🎜🎜🎜🎜🎜🎜Feld🎜🎜🎜🎜🎜🎜Typ🎜🎜🎜🎜🎜🎜Erforderlich🎜🎜🎜🎜🎜🎜Standardwert🎜 🎜 🎜🎜🎜🎜Anleitung🎜🎜🎜🎜🎜 🎜 selector🎜🎜String🎜🎜 ist der 🎜🎜 🎜🎜selector🎜🎜🎜🎜

Der Beispielcode lautet wie folgt: 🎜

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

🎜 page.$$ () Methode 🎜

$$() Methode wird verwendet, um das Seitenzahl-Elementarray zu erhalten. Eingabeparameterbeschreibung der $$-Methode: 🎜🎜🎜🎜🎜🎜🎜Feld🎜🎜🎜🎜🎜🎜Typ🎜🎜🎜🎜🎜🎜Erforderlich🎜🎜🎜🎜🎜🎜Standardwert🎜 🎜 🎜🎜🎜🎜Anleitung🎜🎜🎜🎜 🎜 🎜selector🎜🎜String🎜🎜 ist 🎜🎜 🎜🎜selector🎜🎜🎜🎜

示例代码如下：

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教程》

Das obige ist der detaillierte Inhalt vonWozu dient die Uni-App-Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!