更新记录
1.0.3(2023-01-28)
修复中断动画不显示图片bug
1.0.2(2023-01-17)
1.为Overlay组件新增:test[Boolean]值以便开发,当:test="true"时,Overlay呈绿色
1.0.1(2023-01-17)
1.新增Curves类,提供候选动画执行曲线
2.新增HeroConfig类,提供自定义duration 和curve
3.优化切换路由监听逻辑
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
Hero
一个能让页面切换更自然的组件
:heartpulse:效果预览
好看?点个赞,我把他做更好 https://github.com/AK1118/uniapp-hero/
在线预览图片 https://new.ivypha.com/static/uploads/2023/1/16//bdc20527f121e7e92672c9c0507cb60b.gif
开始使用
1.在页面A引入Hero组件和Overlay组件
/*每个有hero页面必须有overlay组件*/
import Overlay from "../../uni_modules/ak1118-hero/components/ak1118-hero/Overlay.vue";
/*屏幕hero屏幕辅助类*/
import {ScreenUtil} from "../../uni_modules/ak1118-hero/components/ak1118-hero/js/index.js";
/*Hero*/
import Hero from "../uni_modules/ak1118-hero/components/ak1118-hero/ak1118-hero.vue"
然后使用它们,这是页面A
<template>
<view>
<Overlay></Overlay>
<!-- hero必须用一个容器包裹起来,并设置他的配对tag和唯一key,radius是圆角,可选。随后传入图片地址,本地或者网络图片都可以 -->
<view class="wrapper">
<Hero :radius="30" tag="testtag" herokey="testkey" imgUrl="/static/logo.png">
<image class="hero" @click="toTest" src="/static/logo.png"></image>
</Hero>
</view>
</view>
</template>
这是页面B
<template>
<view>
<Overlay></Overlay>
<!-- Hero组件内部是你真实的dom,hero会使用它来获取你dom的数据信息,然后复制它并在你页面跳转时重绘 -->
<view class="wrapper">
<Hero :radius="30" tag="testtag" herokey="testkey" imgUrl="/static/logo.png">
<image class="hero" src="/static/logo.png"></image>
</Hero>
</view>
</view>
</template>
注意事项:boom:
1.每个需要使用Hero组件的页面必须要有组件的存在,它本质上是一个悬浮在最顶层的canvas,为hero提供基础渲染。
2.Hero标签内的组件必须有明确的大小宽度
3.使用Hero组件在滚动页面内需要用 ScreenUtil.update(scrollTop)方法设置当前页面滚动数据
4.使用ScreenUtil.setNavBarHeight(navHeight);方法设置页面导航栏高度