✴️星光不负赶路人,所有的幸运都来自于坚持不懈的努力,大家一起加油吧
问题:uniapp 实现图片自动纵向轮播
直接上代码
<template>
<view class="login-box" v-show="iSif">
<view class="broadcastTopBtm"
:style="'height:'+height+'rpx;--scrollHeight--:'+ (-height)+'rpx;--scrollSpeed--:'+ 6 +'s;'" >
备注: --scrollSpeed-- 这个就是在运行在多长时间内执行完这个动画 (这个看自己需求)
<view class="animation_pausedcss" :class="iSif ? 'broadcastDataTopBtmDatacss_top' :''"
:style="'height:'+height+'rpx;'">
<view class="roll_list " :style="'height:'+height+'rpx;'" v-for="(item,index) in rollList" :key="index">
<image :src="item.img" :style="'height:'+height+'rpx;'" @load="loads" mode=""></image>
</view>
</view>
</view>
</view>
</template>
js
/**
在这里解释一下,为什么要v-show,在苹果系统里面(其他手机可正常显示) ,load函数执行 比scrollHeigh 传的慢,导致,height一直为0,所以需要加这个哦
**/
data() {
return {
rollList: [{
img: 图片地址
},
{
img: 图片地址
}
],
height: 0,
iSif: false
}
},
methods: {
loads(res) {
this.height = res.detail.height;
this.iSif = true;
}
}
css
这个是less的写法.sass写法需要将@改为$
@scrollHeight: var(--scrollHeight--);
@keyframes around_top {
0% {
top: 0%;
}
100% {
top: @scrollHeight;
}
}
.login-box {
width: 100%;
height: 100%;
position: relative;
.broadcastTopBtm {
position: fixed;
height: 100%;
width: 100%;
.broadcastDataTopBtmDatacss_top {
width: 100%;
height: 100%;
animation-name: around_top;
animation-duration: var(--scrollSpeed--);
animation-iteration-count: infinite;
animation-timing-function: linear;
position: absolute;
left: 0;
top: 0;
.roll_list {
display: flex;
align-items: center;
height: 100%;
width: 100%;
vertical-align: bottom;
image {
width: 100%;
height: 100%;
}
}
}
}
}