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

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

Page的屬性

屬性	描述	返回類型
path	頁面路徑	String
query	頁面參數	Object
data	頁面的渲染數據	Object

Page的方法

方法	參數	描述	返回值
$	(selector: string)	獲取頁面元素	Element
$$	(selector: string)	獲取頁面元素數組	Element[]
waitFor	(condition: string | number | Function)	等待直到條件成立	void
data	(path?: String)	獲取頁面渲染數據	Object
setData	(data: Object)	設置頁面渲染數據	Object
size	無	獲取頁面的大小	Object
scrollTop	無	獲取頁碼滾動位置	Number
callMethod	(method: string, ...args: any[])	調用頁面的指定方法	any

page.$()方法

$()方法用於獲取頁面的元素。$方法的輸入參數說明：

字段	類型	必填	默認值	說明
selector	String	是		選擇器

示例代碼如下：

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

 page.$$()方法

$$()方法用於獲取頁碼元素數組。$$方法的輸入參數說明：

字段	類型	必填	默認值	說明
selector	String	是		選擇器

示例代碼如下：

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

Page.waitFor()方法

waitFor()方法用於等待直到條件成立。waitFor方法參數說明

字段	類型	必填	默認值	說明
condition	String Number Function	是		等待條件

• 如果條件是string類型時，那么該參數會被當成選擇器，當該選擇器選中元素個數不為零時，結束等待。
• 如果條件是number，那么該參數會被當成超時時長，當經過指定時間后，結束等待。
• 如果條件是FUnction類型，那么該參數會被當成斷言函數，當該函數返回真時，結束等等。

示例代碼如下：

const page = await program.currentPage() await page.waitFor(5000) // 等待 5 秒
await page.waitFor('picker') // 等待頁面中出現 picker 元素
await page.waitFor(async() = >{
    return (await page.$$('picker')).length > 5
})； // 等待頁面中 picker 元素數量大於 5

Page.data()方法

data()方法用於獲取頁碼數據。data()方法參數如下：

字段	類型	必填	默認值	說明
path	String	否		數據路徑

示例代碼如下：

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

Page.setData（）方法

setData()方法用於設置頁面的渲染數據。setData()方法參數如下：

字段	類型	必填	默認值	說明
data	Object	是		要改變的數據

示例代碼如下：

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

Page.size()方法

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

字段	類型	說明
width	number	頁面可滾動寬度
height	number	頁面可滾動高度

Page.callMethod（） 方法

callMethod()方法用於調用頁面的指定方法。callMethod()的參數說明如下：

字段	類型	必填	默認值	說明
method	String	是	-	需要調用的方法名
...args	array	否	-	方法參數

參考網址

• Page控制頁面方法: https://uniapp.dcloud.io/collocation/auto/api?id=page