Apakah kegunaan halaman uni-app?

Modul halaman uni-app menyediakan kaedah untuk mengawal halaman tersebut: 1. "page.$('.index-desc')" 2. "page.$$('. list- text')"; 3. "wait page.waitFor('picker')" dan seterusnya.

Persekitaran pengendalian artikel ini: sistem Windows 7, uni-app versi 2.5.1, komputer DELL G3

Penggunaan halaman uni-app Apakah itu?

Halaman uni-app - Kaedah untuk mengawal halaman

Modul halaman menyediakan kaedah untuk mengawal halaman.

Atribut halaman

属性	描述	返回类型
path	页面路径	String
query	页面参数	Object
data	页面的渲染数据	Object

Atribut

Penerangan

方法	参数	描述	返回值
$	<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

Jenis pemulangan

laluan Laluan halaman String pertanyaanParameter halaman Objek data Data pemaparan halaman Objek

Kaedah halaman

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

kaedah

Parameter

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

Penerangan

Nilai pulangan

$

(pemilih: rentetan)

Dapatkan elemen halaman

Element

$$

<code> (pemilih: rentetan)

Dapatkan tatasusunan elemen halaman

<code>Element[] td>

tunggu Untuk

(keadaan: rentetan | nombor | Fungsi) td>

Tunggu sehingga syarat benar

<code><code>void

data

<code><code><code>(path?: String)

Dapatkan data pemaparan halaman

<code><code><code>Object

setData

(data: Objek) code>

Tetapkan data pemaparan halaman

<code> <code><code>Object

saiz

<code><kod><kod><kod><kod><kod><kod>Tiada</kod></kod></kod></kod></kod></kod> code>

Dapatkan saiz halaman

<code><code><code>Object

scrollTop

<code><code><code><code><code><code>Tiada code>

Dapatkan kedudukan tatal halaman

<code>Nombor

callMethod

(kaedah: rentetan, ...args: mana-mana[])

Panggil kaedah yang ditentukan pada halaman

<code><code>mana-mana

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

halaman.$( ) kaedah Kaedah $() digunakan untuk mendapatkan elemen halaman. Perihalan parameter input kaedah $:

Medan	Jenis	Diperlukan span>	Nilai lalai	Penerangan
pemilih	String	adalah		pemilih

Kod sampel adalah seperti berikut: halaman.$$() kaedah $$() digunakan untuk mendapatkan tatasusunan elemen nombor halaman. Perihalan parameter input kaedah $$:

Bidang	Jenis	Diperlukan	Nilai lalai	Penerangan
pemilih	String	adalah		pemilih

示例代码如下：

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

Atas ialah kandungan terperinci Apakah kegunaan halaman uni-app?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!