uniapp+vue3——通知栏标题纵向滚动切换

介绍

取巧，使用纵向轮播实现

<!-- 通知栏 -->
<view class="noticeBox" v-if="notice.length>0"><image src="/static/images/index/noticeIcon.png" mode="aspectFill"></image><swiper class="noticeSwiper" vertical circular autoplay><swiper-item v-for="(item,index) in notice" :key="index"><view class="noticeTxt">{{item.title}}</view></swiper-item></swiper>
</view>

const notice = ref([])
onLoad((options) => {getIndexNotice()
})
//公告
const getIndexNotice = () => {api.getIndexNotice().then(res => {if (res.code == 1) {notice.value = res.data}})
}

.noticeBox {height: 72rpx;background-color: #ffffff;border-radius: 40rpx;margin-top: 24rpx;color: var(--fui-color-txt);font-size: 26rpx;display: flex;align-items: center;padding: 0 28rpx;image {width: 40rpx;height: 40rpx;margin-right: 20rpx;flex-shrink: 0;}.noticeSwiper {width: 100%;height: 100%;.noticeTxt {width: 100%;height: 100%;line-height: 72rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}}
}