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的属性
属性 | 描述 | 返回类型 |
path | 页面路径 | String |
query | 页面参数 | Object |
data | 页面的渲染数据 | Object |
Page的方法
方法 | 参数 | 描述 | 返回值 |
$ | <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 |
page.$()方法
$()方法用于获取页面的元素。$方法的输入参数说明:
字段 | 类型 | 必填 | 默认值 | 说明 |
selector |
String | 是 | 选择器 |
示例代码如下:
1 const page = await program.currentPage() 2 const element = await page.$('.index-desc') 3 console.log(element.tagName) // 'view'
page.$$()方法
$$()方法用于获取页码元素数组。$$方法的输入参数说明:
字段 | 类型 | 必填 | 默认值 | 说明 |
selector |
String | 是 | 选择器 |
示例代码如下:
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教程》
以上是uni-app page的用法是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

Dreamweaver Mac版
视觉化网页开发工具

WebStorm Mac版
好用的JavaScript开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。