유니앱 페이지 사용법은 무엇인가요?

uni-app 페이지 모듈은 페이지를 제어하는 ​​방법을 제공합니다. 1. "page.$('.index-desc')" 2. "page.$$('.list-text') " ;3. "await page.waitFor('picker')" 등등.

본 글의 운영 환경: Windows 7 시스템, 유니앱 버전 2.5.1, DELL G3 컴퓨터

유니앱 페이지의 사용법은 무엇인가요?

uni-app 페이지 ——페이지 제어 방법

페이지 모듈은 페이지 제어 방법을 제공합니다.

페이지 속성

Property	Description	반환 유형
경로	페이지 경로	String
query	페이지 매개변수	Object
data	페이지의 데이터 렌더링	Object

페이지 메서드

method	매개변수	설명	반환 값
$	<code>(선택기: 문자열)<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.$$()方法

$$()方法用于获取页码元素数组。$$方法的输入参数说明：

페이지 요소 가져오기요소$$<code>(선택기: 문자열)페이지 요소 배열 가져오기

字段	类型	必填	默认值	说明
selector

🎜<code>Element[]🎜🎜🎜🎜waitFor 🎜 🎜<code><code>(조건: 문자열 | 숫자 | 함수)🎜🎜조건이 true일 때까지 기다리세요🎜🎜<code><code>void🎜🎜🎜🎜data🎜🎜<code><code><code>(경로?: 문자열) code>🎜🎜페이지 렌더링 데이터 가져오기🎜🎜<code><code><code>객체🎜🎜🎜🎜setData🎜🎜<code><code><code><code><code>(데이터: 개체) code>🎜🎜페이지 렌더링 데이터 설정🎜🎜<code><code><code>객체🎜🎜🎜 🎜크기🎜 🎜<code><code><code><code><code><code><code>없음 🎜🎜페이지 크기 가져오기🎜🎜<code><code><code>객체 🎜🎜🎜🎜scrollTop 🎜🎜<code><code><code><code><code><code><code>없음 code>🎜🎜페이지 번호 스크롤 위치 가져오기🎜🎜<code><code><code>번호🎜🎜🎜🎜 callMethod🎜🎜<code><code><code><code><code><code><code><code>(method: string, ...args: any[] ) code>🎜🎜페이지에 지정된 메소드를 호출🎜🎜<code><code><code>모든🎜🎜🎜🎜

page.$() 메소드

$() 페이지의 요소를 가져오는 데 사용되는 메서드입니다. $ 메소드의 입력 매개변수 설명: 🎜🎜🎜🎜🎜🎜🎜Field🎜🎜🎜🎜🎜🎜Type🎜🎜🎜🎜🎜🎜Required🎜🎜🎜🎜🎜🎜기본값🎜 🎜 🎜🎜🎜🎜지침🎜🎜🎜🎜🎜 🎜 selector🎜🎜String🎜🎜은 🎜🎜 🎜🎜selector🎜🎜🎜🎜

샘플 코드는 다음과 같습니다: 🎜

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

🎜 page.$$ () 메소드 🎜

$$() 메소드는 페이지 번호 요소 배열을 얻는 데 사용됩니다. $$ 메소드의 입력 매개변수 설명: 🎜🎜🎜🎜Field🎜🎜🎜🎜🎜🎜Type🎜🎜🎜🎜🎜🎜Required🎜🎜🎜🎜🎜🎜🎜 🎜 🎜🎜🎜🎜지침🎜🎜🎜🎜 🎜 🎜selector🎜🎜String🎜🎜은 🎜🎜 🎜🎜selector🎜🎜🎜🎜입니다.

示例代码如下：

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

위 내용은 유니앱 페이지 사용법은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!