更新记录
2.0(2021-10-27)
下载此版本
修复初始化延迟bug
1.0(2021-10-27)
下载此版本
无
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.22 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
如何使用
导入并且注册
import vastwuSingleimgPlay from '@/components/vastwu-singleimg-play/vastwu-singleimg-play.vue'
components:vastwuSingleimgPlay }
<vastwu-singleimg-play path="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/baike/s=220/sign=b6ae7334978fa0ec7bc7630f1696594a/b7003af33a87e950e154426b16385343fbf2b472.jpg" :height="200"></vastwu-singleimg-play>
参数说明
参数名 |
说明 |
类型 |
默认 |
path |
图片地址 |
String |
'' |
height |
要展示的图片高度(注:代码默认是mode=“heightFix”即根据高度自适应) |
Number |
86 |
dur |
动画的过渡时间单位是秒 |
Number |
5 |
其他
其实吧 要实现这个效果压根就不需要这个组件,你需要的只是下面这几行css代码 test-img赋给一张图完事~~嘿嘿🤭
.test-img {
animation: myfirst2 5s linear infinite;
}
.test-img:hover {
animation: myfirst2 5s linear infinite paused;
}
@keyframes myfirst2 {
0% {
transform: translateX(750rpx);
}
100% {
transform: translateX(-100%);
}
}