uniapp 实现图片自动纵向轮播

✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧

问题: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%;
					}
				}
			}
		}
	}