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的屬性

Page的方法

page.$()方法

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

示例代碼如下：

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

page.$$()方法

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

示例代碼如下：

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

Page.waitFor()方法

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

• 如果條件是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()方法參數如下：

示例代碼如下：

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

Page.setData（）方法

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

示例代碼如下：

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

Page.size()方法

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

Page.callMethod（） 方法

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

推薦學習：《uni-app教程》