• 技术文章 >web前端 >uni-app

    uni-app page的用法是什么

    藏色散人藏色散人2021-09-15 13:52:20原创171

    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.$()方法

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

    字段类型必填默认值说明
    selectorString 选择器

    示例代码如下:

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

    page.$$()方法

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

    字段类型必填默认值说明
    selectorString 选择器

    示例代码如下:

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

    Page.waitFor()方法

    waitFor()方法用于等待直到条件成立。waitFor方法参数说明

    字段类型必填默认值说明
    conditionString 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()方法参数如下:

    字段类型必填默认值说明
    pathString 数据路径

    示例代码如下:

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

    Page.setData()方法

    setData()方法用于设置页面的渲染数据。setData()方法参数如下:

    字段类型必填默认值说明
    dataObject 要改变的数据

    示例代码如下:

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

    Page.size()方法

    size()方法获取页面的大小。size()的返回值如下:

    字段类型说明
    widthnumber页面可滚动宽度
    heightnumber页面可滚动高度

    Page.callMethod() 方法

    callMethod()方法用于调用页面的指定方法。callMethod()的参数说明如下:

    字段类型必填默认值说明
    methodString -需要调用的方法名
    ...args array-方法参数

    推荐学习:《uni-app教程

    以上就是uni-app page的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:uni-app
    上一篇:uni-app如何跳转页面 下一篇:如何解决uni图标在app上不显示的问题
    大前端线上培训班

    相关文章推荐

    • uni-app怎么设置全局颜色• uni-app是什么语言• 浅谈uni-app项目怎么监听触摸和滑动事件• uni-app如何跳转页面

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网