What is the usage of uni-app page?

uni-app page module provides methods to control the page. The usage methods are: 1. "page.$('.index-desc')"; 2. "page.$$('.list- text')"; 3. "await page.waitFor('picker')" and so on.

The operating environment of this article: Windows 7 system, uni-app version 2.5.1, DELL G3 computer

Usage of uni-app page What is it?

Page of uni-app——Methods to control the page

Page module provides methods to control the page.

Page properties

##pathPage pathStringqueryPage parametersObject data Rendering data of the page Object

Properties	Description	Return type

Page method

##$##(selector: string)Element(condition: string | number | FunctionvoidObjectObject#(method: string, ...args: any[])

Method	Parameters	##Description	Return value
	Get page elements<code>		<code>$$
(selector: string)	<code><code>Get the page element array	Element[]	<code><code>waitFor
	)<code><code><code>Wait until the condition is true		<code><code><code>data
	(path ?: String)<code><code><code><code>Get page rendering data		Object<code><code><code><code>setData
	<code><code><code>## (data: Object)<code><code><code><code><code>Set page rendering data		<code><code><code><code>##size
	<code><code>None<code><code><code><code><code><code>##Get the size of the page		<code><code><code><code>##scrollTop
	none<code><code><code><code><code><code><code><code> Get the page number scroll positionNumber		<code><code><code>## callMethod<code>
	<code><code><code><code><code><code><code><code><code>Call the specified method on the pageany		<code><code><code>page.$() method <code>$() method is used Get the elements of the page. Input parameter description of $method:

Field

TypeselectorThe sample code is as follows: page.$$() method$ The $() method is used to obtain the page number element array. Input parameter description of $$ method:

Required	Default value	Description		String is
Selector<code>		1 const page = await program.currentPage() 2 const element = await page.$('.index-desc') 3 console.log(element.tagName) // 'view'

Field

TypeSelector

示例代码如下：

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

Page.waitFor()方法

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

Required	##Default value	Description	selector	Stringis
<code>

字段	类型	必填	默认值	说明
<code>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()方法参数如下：

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

示例代码如下：

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

Page.setData（）方法

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

字段	类型	必填	默认值	说明
<code>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()的参数说明如下：

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

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

The above is the detailed content of What is the usage of uni-app page?. For more information, please follow other related articles on the PHP Chinese website!