【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条滚动通知"},],})相关文章:
【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-animati…...
this.refs[‘tagInput‘].refs.input.focus()和this.$refs[‘tagInput‘].focus()区别
this.$refs[tagInput].$refs.input.focus()和this.$refs[tagInput].focus()两者之间的选择取决于你的组件结构和如何访问DOM元素。 1.this.$refs[tagInput].$refs.input.focus(): 2.这种语法假设你的this.$refs[tagInput]是一个组件实例,并且这个组件实例有一个名为…...
电脑硬件坏了,如何维修?
在电子设备日益普及的今天,电脑已成为很多人生活和工作中不可或缺的工具,然而在使用过程中很容易遇见电脑故障之类的问题,这些问题十有八九来自硬件,那么针对电脑硬件问题,该如何维修? 一般来说,…...
elementplus日期时间选择器组件显示很窄
问题描述 似乎是elementplus原生组件的宽度是和父组件相关的 只要父组件很窄就会让弹窗也很窄,但其实两者的宽度不必有这种限制 解决思路 打开控制条查看元素位置以及css样式的class名 发现类名为el-picker-panel__body 尝试重构 css内写样式 .el-picker-pane…...
第三方软件测评选择远程测试好还是现场测试好?
如今许多软件企业在软件开发过程完成之后,会将软件测试工作交由第三方软件测评机构来进行,那么做第三方软件测试时,远程测试和现场测试哪个更好呢?我想这是许多软件企业都十分关注的问题,今天卓码软件测评小编将对以上问题作出简…...
HTTPS协议:保障网络安全的加密通信协议
在当今数字化时代,网络安全问题备受关注。为了保护用户的隐私和数据安全,HTTPS协议应运而生。本文将介绍HTTPS协议的定义、工作原理以及其在网络通信中的重要性。 一、HTTPS协议的定义 HTTPS(Hypertext Transfer Protocol Secure)…...
C++设计模式_21_Iterator 迭代器(理解;面向对象的迭代器已过时;C++中使用泛型编程的方式实现)
Iterator 迭代器也是属于“数据结构”模式。GoF中面向对象的迭代器已经过时,C中目前使用泛型编程的方式实现,其他语言还在使用面向对象的迭代器。 文章目录 1. 动机(Motivation)2. 模式定义3. Iterator 迭代器代码分析4. 面向对象的迭代器与泛型编程实现…...
有一个 3*4 的矩阵,找出其中值最大的元素,及其行列号
1解题思路: 首先学会输入二维数组;然后知道如何比较求最大值;最后就是格式问题; 2代码: #include<stdio.h> int main() {int a[3][4];int i,j,max,row,line;for(i0;i<3;i){printf("请输入二维数组\n&…...
磁盘的命令
目录 1- 磁盘空间命令1.1 df1.2 du只想查看目录的权限 加 -d 参数 1- 磁盘空间命令 1.1 df 全称 disk free 快速获取磁盘被占用了多少空间, 目前还剩下所少空间 常用命令df -hdf 是从总体上统计系统各磁盘的占用情况,不能统计具体的文件夹或文件的大小 1.2 du 全称 disk u…...
一张图讲清楚业务稳定性要如何做:SRE体系化稳定性方案
概述:作为一个SRE、运维工程师,当我们在治理系统稳定性时,方法有很多,但往往无从下手。本文以一张逻辑图的形式,为读者提供治理稳定性的体系化思路。 先上图: 1、治理目标 我们做稳定性的目标,…...
安卓端GB28181设备接入模块如何实现实时位置订阅(MobilePosition)
技术背景 实时位置(MobilePosition)订阅和上报,对GB28281设备接入终端尤其重要,如移动单兵设备、执法记录仪、智能安全帽、车载终端等,Android国标接入设备通过获取到实时经纬度信息,按照一定的间隔上报到…...
11.与JavaScript深入交流-[js一篇通]
文章目录 1.变量的使用1.1基本用法1.2理解 动态类型 2.基本数据类型2.1number 数字类型2.1.1数字进制表示2.1.2特殊的数字值 2.2string 字符串类型2.2.1基本规则2.2.2转义字符2.2.3求长度2.2.4字符串拼接 2.3boolean 布尔类型2.4undefined 未定义数据类型2.5null 空值类型 3.运…...
Ubuntu 搭建 DHCP ivp6 server 步骤
Ubuntu 搭建 DHCP ivp6 server 步骤 安装 DHCP server安装 radvd(实现局域网路由功能)测试运行 安装 DHCP server apt 安装 isc-dhcp-server sudo apt-get install isc-dhcp-server修改配置文件 /etc/dhcp/dhcpd6.conf 内容如下: lease-time 7200; lo…...
分享大数据分析师前景怎么样? 从事行业有哪些?
数据分析师发展前景和待遇怎么样?有前途吗?好找工作吗?根据某招聘网数据显示,当前市场表现为: 2023年较2022年同期对比增长160%,2022年较2021年下降了46%。 工资待遇:2023年较2022年下降了2…...
通过wordpress能搭建有影响力的帮助中心
wordpress建站服务是一种提供简单易用的工具和功能,帮助用户轻松创建和管理网站的服务。它适用于各类网站管理员、个人博主和小型企业主,无论是想要搭建个人博客、展示作品集还是开设在线商店,都可以通过wordpress建站服务来实现。 | 一、搭建…...
word页脚设置,页脚显示第几页共有几页设置步骤
word页脚设置,页脚显示第几页共有几页设置步骤: 具体步骤: 步骤1: 步骤1.1选择页脚---空白页脚 步骤1.2,在"[在此处键入]",直接输入你需要的格式,如 “第页/共页” 步骤1.3选择第“…...
C语言实现斐波那契数列的多种方法
斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多斐波那契(Leonardo Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”。对于解决此类问题方法有四,前两…...
一文解决:Swagger API 未授权访问漏洞问题
Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面,让开发者可以更方便地查看和测试 API 接口。然而,在一些情况下,未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 …...
Elasticsearch下载安装,IK分词器、Kibana下载安装使用,elasticsearch使用演示
首先给出自己使用版本的网盘链接:自己的版本7.17.14 链接:https://pan.baidu.com/s/1FSlI9jNf1KRP-OmZlCkEZw 提取码:1234 一般情况下 Elastic Search(ES) 并不单独使用,例如主流的技术组合 ELK(…...
springboot自定义404页面
添加配置类 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import javax.servlet.Servlet; import org.apache.catalina.startup.Tomcat; import org.apache.catalina.valves.ErrorReportValve; import org.apache.coyote.UpgradeProtoc…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件,可以展示文件夹,支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项,适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...
node.js的初步学习
那什么是node.js呢? 和JavaScript又是什么关系呢? node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说, 需要在node.js的环境上进行当JavaScript作为前端开发语言来说,需要在浏览器的环境上进行 Node.js 可…...
