站长资讯网
最全最丰富的资讯网站

uni-app page的用法是什么

uni-app page模块提供了控制页面的方法,使用方法有:1、“page.$('.index-desc')”;2、“page.$$('.list-text')”;3、“await page.waitFor('picker')”等等。

uni-app page的用法是什么

本文操作环境:Windows7系统、uni-app2.5.1版,DELL G3电脑

uni-app page的用法是什么?

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 选择器

示例代码如下:

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教程》

赞(0)
分享到: 更多 (0)