【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) 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条滚动通知"},],})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/177914.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内涝积水监测的效果怎么样?城市内涝怎么监测?

近些年来全球气候变暖带来极端天气的频繁出现&#xff0c;尤其在一些季节之中&#xff0c;暴雨现象的出现会导致城市严重的内涝现象&#xff0c;路面积水问题不仅影响道路交通安全&#xff0c;而且也给市民生命安全带来威胁&#xff0c;背后存在的安全隐患&#xff0c;更是城市…

nmap 使用方法详细介绍

nmap的使用 前言nmap 作用Nmap使用教程 nmap的基本输入&#xff1a;扫描参数&#xff1a;端口扫描&#xff1a;端口状态扫描&#xff1a;UDP扫描协议扫描 总结 Nmap的基础知识Nmap的扫描技术 Nmap的OS检测&#xff08;O&#xff09;Nmap的操作系统指纹识别技术&#xff1a; 前…

网络套接字编程(三)

网络套接字编程(三) 文章目录 网络套接字编程(三)简易日志组件引入日志的原因日志等级打印日志函数将日志组件使用到服务端中 守护进程概念进程组、终端、会话守护进程的实现原理守护进程化组件将守护进程化组件使用到服务端中 补充知识关于inet_ntoa 在上一篇博客 网络套接字…

【Apache Flink】Flink DataStream API的基本使用

Flink DataStream API的基本使用 文章目录 前言1. 基本使用方法2. 核心示例代码3. 完成工程代码pom.xmlWordCountExample测试验证 4. Stream 执行环境5. 参考文档 前言 Flink DataStream API主要用于处理无界和有界数据流 。 无界数据流是一个持续生成数据的数据源&#xff0…

git命令清单

一、设置和配置 1.初始化一个新的仓库&#xff1a; git init2.克隆&#xff08;Clone&#xff09;一个远程仓库到本地&#xff1a; git clone <repository_url>3.配置用户信息&#xff1a; git config --global user.name "Your Name" git config --global…

疑难杂症-暂时不能解析域名“mirrors.tuna.tsinghua.edu.cn”

可能是太久没用Ubuntu了&#xff0c;总是有一些莫名其妙的问题 我的方法简单粗暴&#xff1a;不需要重启&#xff0c;打开终端&#xff0c;输入sudo apt-get update&#xff0c;解析成功 还有一些别的方法&#xff0c;不过我也没试过 修改/etc/resolv.conf还是修改/etc/resol…

客户端与服务端实时通讯(轮询、websocket、SSE)

客户端与服务端实时通讯 背景 在某些项目中&#xff0c;某些数据需要展示最新的&#xff0c;实时的&#xff0c;这时候就需要和服务端进行长时间通讯 方案 对于数据实时获取&#xff0c;我们一般会有4种方案&#xff1a; 1.短轮询&#xff1a;使用浏览器的定时器发起http请…

两个字符串的删除操作

题目描述 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。每步可以删除任意一个字符串中的一个字符。 示例 思路 其实这道题的思路和最长公共子序列的思路一致&#xff0c;本题让我们求word1 和 word2 相同所需的最小步数&#xff0…

[概述] 获取点云数据的仪器

这里所说的获取点云的仪器指的是可以获取场景中物体距离信息的相关设备&#xff0c;下面分别从测距原理以及适用场景来进行介绍。 一、三角测距法 三角测距原理 就是利用三角形的几何关系来测量物体的距离。想象一下&#xff0c;你站在一个地方&#xff0c;你的朋友站在另一…

【笔记】excel怎么把汉字转换成拼音

1、准备好excel文件&#xff0c;复制需要转拼音列。 2、打开一个空白Word文档&#xff0c;并粘贴刚才复制的内容&#xff1b; 3、全选Word文档中刚粘贴的内容&#xff0c;点击「开始」选项卡「字体」命令组下的「拼音指南」&#xff0c;调出拼音指南对话框&#xff1b; 4、全…

数据库深入浅出,数据库介绍,SQL介绍,DDL、DML、DQL、TCL介绍

一、基础知识&#xff1a; 1.数据库基础知识 数据(Data)&#xff1a;文本信息(字母、数字、符号等)、音频、视频、图片等&#xff1b; 数据库(DataBase)&#xff1a;存储数据的仓库&#xff0c;本质文件&#xff0c;以文件的形式将数据保存到电脑磁盘中 数据库管理系统(DBMS)&…

MySQL Error 1215: Cannot add foreign key constraint

首先确保中介表中被设置外键的字段不能被设置为主键 第二步确保外键字段的属性与要连接的表的字段属性相同 第三步&#xff0c;设置表的选项 修改引擎为 InnoDB 三个表的引擎都要修改 最后就是运行代码 SET OLD_FOREIGN_KEY_CHECKSFOREIGN_KEY_CHECKS; SET FOREIGN_KEY_…

在微信小程序怎么领取优惠券

随着科技的发展&#xff0c;微信小程序已经成为我们日常生活中不可或缺的一部分。它为我们提供了各种各样的服务&#xff0c;使我们的生活变得更加便捷。而在这些服务中&#xff0c;领取优惠券成为了大家特别喜欢的功能之一。本文将详细介绍如何在微信小程序中领取优惠券&#…

电压跟随器输入脚悬空引起的振荡

昨天在调试一个电路板的时候&#xff0c;发现进单片机AD脚的信号上面有个50Hz的波形&#xff0c;峰峰值还挺大&#xff0c;有几百毫伏。这种情况只有在输入端悬空的时候才出现&#xff1b;在输入端接了信号或者传感器的时候&#xff0c;就又正常了。 经过排查&#xff0c;发现…

图数据库Neo4j——SpringBoot使用Neo4j 简单增删改查 复杂查询初步

前言 图形数据库是专门用于存储图形数据的数据库&#xff0c;它使用图形模型来存储数据&#xff0c;并且支持复杂的图形查询。常见的图形数据库有Neo4j、OrientDB等。 Neo4j是用Java实现的开源NoSQL图数据库&#xff0c;本篇博客介绍如何在SpringBoot中使用Neo4j图数据库&…

外汇天眼:进行外汇交易,杠杆是不是越大越好?

有在做外汇保证金交易的投资人&#xff0c;相信对杠杆一定不陌生&#xff0c;不知道你是否曾经想过&#xff0c;外汇杠杆到底要怎么用比较好&#xff1f;一家经纪商提供的杠杆越大&#xff0c;对交易者来说就一定好吗&#xff1f;让我们一起思考以下几个问题。 滥用外汇交易杠…

稳恒电路直观理解0

图v0 图v1 图v2 图v3 图v4 自由正电荷s&#xff0c;定向移动过程中&#xff0c;在任何一位置处受力都是平衡的&#xff0c;即s所受总合力为0&#xff0c; 即s处于匀速运动&#xff1a;直导体中匀速直线运动、拐弯处匀速圆周运动 起初t0时刻, s的势能是最高的E0&#xff0c;之…

HarmonyOS数据管理与应用数据持久化(一)

一. 数据管理概述 功能介绍 数据管理为开发者提供数据存储、数据管理能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠等管理机制。 数据存储&#xff1a;提供通用数据持久化能力&#xff0c;根据数据特点&#xff0c;分为用户首选项、…

文本生成高质量3D模型,支持二次编辑!Stable Difusion新产品来啦

11月2日&#xff0c;著名开源平台Stability AI&#xff08;Stable Difusion母公司&#xff09;在官网宣布推出了Stable 3D&#xff0c;支持用户通过文本、图片或插图&#xff0c;直接就能生成高质量3D模型。 生成模型的格式是.obj&#xff0c;可以直接在Blender、Maya、C4D、Z…

2127. 参加会议的最多员工数 : 啥是内向/外向基环树(拓扑排序)

题目描述 这是 LeetCode 上的 「2127. 参加会议的最多员工数」 &#xff0c;难度为 「困难」。 Tag : 「拓扑排序」、「内向基环树」、「图」 一个公司准备组织一场会议&#xff0c;邀请名单上有 n 位员工。 公司准备了一张圆形的桌子&#xff0c;可以坐下任意数目的员工。 员工…