uni-app page的用法是什么

百变鹏仔 2个月前 (11-20) #uniapp

文章标签 uni

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的方法

方法	参数	描述	返回值
$	(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	是		等待条件

示例代码如下：

1 const page = await program.currentPage() await page.waitFor(5000) // 等待 5 秒2 await page.waitFor('picker') // 等待页面中出现 picker 元素3 await page.waitFor(async() = &gt;{4     return (await page.$$('picker')).length &gt; 55 })； // 等待页面中 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的用法是什么

Page的属性

Page的方法

page.$()方法

page.$$()方法

Page.waitFor()方法

Page.data()方法

Page.setData（）方法

Page.size()方法

Page.callMethod（） 方法

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项

Page.callMethod（）方法