uni-app 頁的用法是什麼

uni-app page模組提供了控制頁面的方法，使用方法有：1、「page.$('.index-desc')」；2、「page.$$('.list- text')”；3、“await page.waitFor('picker')”等等。

本文操作環境：Windows7系統、uni-app2.5.1版，DELL G3電腦

uni-app page的用法是什麼？

uni-app之Page－控制頁面的方法

Page 模組提供了控制頁面的方法。

Page的屬性

## data

#屬性	描述	回傳類型
path	頁路徑	String
query	#頁面參數	#Object

# # 頁面的渲染資料 Object方法參數描述#(selector: string)取得頁面元素$$取得頁面元素陣列waitFor等待直到條件成立Object# (data: Object)Object無Object無取得頁碼捲動位置#(method: string, ...args: any[])#呼叫頁面的指定方法

Page的方法
	<code>傳回值		<code>$
	<code><code>Element		<code><code>(selector: string)
	<code>Element[]<code><code>		<code><code>(condition: string | number | Function<code>)
	void<code><code><code><code>data		<code>(path ?: String)<code><code><code> 取得頁面渲染資料
	<code> <code><code><code><code><code><code>#setData<code>		<code><code><code><code>#設定頁面渲染資料
	<code><code><code><code><code><code><code>size<code>		<code><code><code><code># 取得頁面的大小
	<code><code><code><code><code><code><code>#scrollTop<code>		<code><code><code><code>
	<code><code>Number<code><code><code><code><code><code><code># callMethod		<code><code><code><code>

any#page.$()方法#預設值說明

	$()方法用於取得頁面的元素。 $方法的輸​​入參數說明：	欄位	欄位	##類型
<code>必填

selectorString page.$$()方法必填#預設值

##是 選擇器	範例程式碼如下： 1 const page = await program.currentPage() 2 const element = await page.$('.index-desc') 3 console.log(element.tagName) // 'view'	$ $()方法用於取得頁碼元素數組。 $$方法的輸​​入參數說明：	欄位	欄位
<code>##類型

######## #######說明#####################selector#########String#####是### ### ######選擇器#############

示例代码如下：

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

Page.waitFor()方法

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

字段	类型	必填	默认值	说明
<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教程》

以上是uni-app 頁的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！