uni-app实现多行文字上下滚动的黑科技

效果一般，但是比较简单好理解。

这种是几条数据来回滚动的。

<template>
    <view class="uni-margin-wrap">
		<swiper circular :indicator-dots="false" :autoplay="true" :vertical="true" style="height: 68rpx;">
        <!-- 敲重点，这个height:68rpx;的样式一定要写，但是不一定必须要是行内样式，写哪都行。这个地方的高度，就是你文字的高度×几行，比如我的line-height是34，我写了2行，这个地方的高度就是68 -->
			<swiper-item v-for="(item,i) in news">
				<view>{{item}}</view>
                <!-- 又一个重点来了，每一个v-if和v-else为一组，逻辑就是，展示当前获取数据的下一条，如果是最后一条就展示第一条数据 -->
				<view v-if="i!=news.length">{{news[i+1]}}</view>
				<view v-else>{{news[0]}}</view>
				<view v-if="i+1<news.length">{{news[i+2]}}</view>
				<view v-else>{{news[i-news.length-2]}}</view>
                .....
                <!-- 从第三行开始写法都一样，n为第几行减1，即第三行的时候n=2,第4行的时候n=3 -->
                <view v-if="i+n-1<news.length">{{news[i+n]}}</view>
				<view v-else>{{news[i-news.length-n]}}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

如果是实时数据就简单了。

<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper circular :indicator-dots="false" :autoplay="true" :interval='2000' :vertical="true" style="height: 68rpx;">
				<swiper-item v-for="(item,i) in news">
					<view>{{item}}</view>
					<view>{{news[i+1]}}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news: ['14分钟前，u**抽中一等奖',
					'15分钟前，u**抽中一等奖',
					'16分钟前，u**抽中一等奖',
					'17分钟前，u**抽中一等奖',
					'18分钟前，u**抽中一等奖', 
				],
			}
		},
        onLoad(){
            setInterval(() => {
			    var list = [new Date().getSeconds() + '分钟前，u**抽中一等奖',new Date().getSeconds() + '分钟前，u**抽中一等奖']
				this.news = this.news.concat(list);
			}, 4000)
        },
		methods: {
			
		}
	}
</script>

<style>
    .uni-margin-wrap {
		width: 500rpx;
		/* height: 68rpx; */
		/* overflow-y: hidden; */
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1B292E;
		line-height: 34rpx;
	}
</style>