当前位置：首页 > news >正文

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

news 2025/7/29 11:55:11

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) returndata.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 verticalclass="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条滚动通知"},],})