首页 > 编程语言 >uniapp 窗口动画(仅APP支持,小程序不支持)

uniapp 窗口动画(仅APP支持,小程序不支持)

时间:2022-08-17 12:15:21浏览次数:89  
标签:uniapp 动画 APP 支持 slide API 窗体 pop out

本API仅App支持。小程序自身不支持自定义动画。H5的窗体动画可使用常规单页动画处理方案,见H5下单页动画示例(opens new window)

窗口的显示/关闭动画效果,支持在 API、组件、pages.json 中配置,优先级为:API = 组件 > pages.json

一、API

有效的路由 API

  • navigateTo
  • navigateBack
uni.navigateTo({
	url: '../test/test',
	animationType: 'pop-in',
	animationDuration: 200
});
uni.navigateBack({
	delta: 1,
	animationType: 'pop-out',
	animationDuration: 200
});

二、组件

open-type 有效值

  • navigateTo
  • navigateBack
<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

三、pages.json

pages.json 中配置的是窗口显示的动画

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}

显示动画与关闭动画,会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型,则不会使用默认的类型。

显示动画 关闭动画 显示动画描述(关闭动画与之相反)
slide-in-right slide-out-right 新窗体从右侧进入
slide-in-left slide-out-left 新窗体从左侧进入
slide-in-top slide-out-top 新窗体从顶部进入
slide-in-bottom slide-out-bottom 新窗体从底部进入
pop-in pop-out 新窗体从左侧进入,且老窗体被挤压而出
fade-in fade-out 新窗体从透明到不透明逐渐显示
zoom-out zoom-in 新窗体从小到大缩放显示
zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
none none 无动画

详细的窗口动画说明,请参考:

四、注意

  • 纯nvue项目(render为native),窗体动画默认进入动画为popin,返回为pop-out。如果想修改动画类型,只能通过uni.navigateTo API修改,在组件或pages.json里配置动画类型无效
  • 非纯nvue项目,App端窗体动画,默认进入动画为slider-in-right,默认返回动画为pop-out
  • webview 中嵌入 uni-app H5时,使用 uni.webView.navigateTo... 跳转页面

标签:uniapp,动画,APP,支持,slide,API,窗体,pop,out
From: https://www.cnblogs.com/moranjl/p/16594641.html

相关文章

  • 网页大附件上传,支持断点续传
    ​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:......
  • 技术分享 | App常见bug解析
    原文链接功能Bug内容显示错误前端页面展示的内容有误。这种错误的产生有两种可能1、前端代码写的文案错误2、接口返回值错误功能错误功能错误是在测试过程中最常......
  • uniapp 在当前页面显示/隐藏导航条加载动画
    一、uni.showNavigationBarLoading(OBJECT)在当前页面显示导航条加载动画。App平台调用此API时会在屏幕中间悬浮显示loadingOBJECT参数说明参数类型必填说明......
  • 技术分享 | Appium 用例录制
    原文链接下载及安装下载地址:https://github.com/appium/appium-desktop/releases下载对应系统的Appium版本,安装完成之后,点击“StartServer”,就启动了AppiumServe......
  • uniapp 动态设置当前页面的标题
    uni.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。OBJECT参数说明参数类型必填说明titleString是页面标题successFunction否接口调用成......
  • 技术分享 | app自动化测试(Android)--App 控件定位
    原文链接客户端的页面通过XML来实现UI的布局,页面的UI布局作为一个树形结构,而树叶被定义为节点。这里的节点也就对应了要定位的元素,节点的上级节点,定义了元素的布局......
  • 技术分享 | app自动化测试(Android)-- 属性获取与断言
    原文链接本文节选自霍格沃兹测试开发学社内部教材断言是UI自动化测试的三要素之一,是UI自动化不可或缺的部分。在使用定位器定位到元素后,通过脚本进行业务操作的交互,......
  • B/S大附件上传,支持断点续传
    ​ 1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出、还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候,首先要将本地文......
  • Apple 登录、绑定注销
    AppleUntilService:packagecom.bzcst.bop.portal.third.apple.service;importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;importcom.bzcst......
  • .NET MAUI 跨平台应用程序 (Windows App 和 Android )示例
    也就前周,.NetMAUI正式版出来了,一个支持跨平台的UI框架,Linux支持情况官网也没说,按理来说应该也是支持的,刚好,我最近也在研究GUI的基本原理,微软出品还是值得深入研究一下的......