【uniapp+vue3】scroll-view实现纵向自动滚动及swiper实现纵向自动滚动

scroll-view本身不支持自动滚动，通过scroll-top属性控制滚动，但是不可以循环滚动

		<scroll-view class="notice-bar" scroll-y="true" ref="scrollViewRef" 
		:scroll-top="data.scrollViewTop"
				scroll-with-animation>
				<view class="carousel-wrapper">
					<view class="notice-item" 
					v-for="(item,index) in data.notices"    		
							:key='index'>
						<image :src="item.icon" alt=""></image>
						<text class="notice-text">{{item.text}}</text>
					</view>
				</view>
			</scroll-view>

<script lang="ts" setup>
import { reactive, getCurrentInstance, onMounted, onUnmounted, ref } from "vue";
const data = reactive({
		notices: [
			{
				icon: "/static/images/common/1.png",
				text: "这是第1条滚动通知"
			},
			{
				icon: "/static/images/common/2.png",
				text: "这是第2条滚动通知"
			},
			{
				icon: "/static/images/common/3.png",
				text: "这是第3条滚动通知"
			},
		],
		timer: null,
		currentIndex: 0,
		scrollViewTop: 0
	})
	onMounted(() => {
		startScroll();
	})
	onUnmounted(() => {
		stopScroll()
	})
		function startScroll() {
		if (data.notices.length <= 1) return
		data.timer = setInterval(() => {
			data.currentIndex++;
			if (data.currentIndex >= data.notices.length) {			
				stopScroll()
			} else {
				data.scrollViewTop = data.currentIndex * 30
			}
		}, 1000);
	}
	function stopScroll() {
		clearInterval(data.timer);
		data.timer = null;
	}
	</script>

	.invite-rules {
			display: flex;
			justify-content: center;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;		
			.notice-bar {				
				width: 60%;
				height: 100%;
				padding: 0 15rpx;
				margin-top: 25rpx;
				margin-right: 25rpx;
				background-color: rgba(87, 184, 253, .5);
				border-radius: 25rpx;
				white-space: nowrap;
				.carousel-wrapper {				
					display: inline-block;				
					.notice-item {
						display: flex;
						margin-top: 10rpx;					
						image {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						.notice-text {
							margin-right: 10rpx;
							font-size: 18rpx;
							color: #FFFFFF;
							line-height: 36rpx;
						}
					}
				}

			}

使用swiper组件实现很简单，封装下即可用，且支持衔接滑动

<template>
	<view class="">
		<swiper :autoplay="true" :interval="3000" indicator-color="#999" indicator-active-color="#333" circular vertical
			class="notice-bar">
			<swiper-item v-for="(item, index) in list" :key="index" class="notice-item ">
				<image :src="item.imageUrl" class="notice-image"></image>
				<text class="notice-text">{{ item.text }}</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		list: Array,
	});
</script>

<style lang="scss" scoped>
	.notice-bar {
		display: flex;
		width: 410rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 15rpx;
		margin-top: 25rpx;
		margin-right: 25rpx;
		background-color: rgba(87, 184, 253, .5);
		border-radius: 25rpx;
		white-space: nowrap;

		.notice-item {
			display: flex;
			// justify-content: center;
			align-items: center;

			.notice-image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.notice-text {
				margin-right: 10rpx;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}

		}

	}
</style>

父组件中使用

<view class="invite-rules">
			<scrollSwiper :list="data.notices" />
			<view class="rules" >
		xxxx
			</view>
		</view>

.invite-rules {
			display: flex;
			justify-content: center;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			
		}

<script lang="ts" setup>
import { reactive, getCurrentInstance, onMounted, onUnmounted, ref } from "vue";
import scrollSwiper from './component/scrollSwiper.vue'
const data = reactive({
	
		notices: [
			{
				imageUrl: "/static/images/common/1.png",
				text: "这是1条滚动通知"
			},
			{
				imageUrl: "/static/images/common/1.png",
				text: "这是2条滚动通知"
			},
			{
				imageUrl: "/static/images/common/1.png",
				text: "这是3条滚动通知"
			},
		],
		})