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

【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本身不支持自动滚动&#xff0c;通过scroll-top属性控制滚动&#xff0c;但是不可以循环滚动 <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]是一个组件实例&#xff0c;并且这个组件实例有一个名为…...

电脑硬件坏了,如何维修?

在电子设备日益普及的今天&#xff0c;电脑已成为很多人生活和工作中不可或缺的工具&#xff0c;然而在使用过程中很容易遇见电脑故障之类的问题&#xff0c;这些问题十有八九来自硬件&#xff0c;那么针对电脑硬件问题&#xff0c;该如何维修&#xff1f; 一般来说&#xff0c…...

elementplus日期时间选择器组件显示很窄

问题描述 似乎是elementplus原生组件的宽度是和父组件相关的 只要父组件很窄就会让弹窗也很窄&#xff0c;但其实两者的宽度不必有这种限制 解决思路 打开控制条查看元素位置以及css样式的class名 发现类名为el-picker-panel__body 尝试重构 css内写样式 .el-picker-pane…...

第三方软件测评选择远程测试好还是现场测试好?

如今许多软件企业在软件开发过程完成之后&#xff0c;会将软件测试工作交由第三方软件测评机构来进行&#xff0c;那么做第三方软件测试时&#xff0c;远程测试和现场测试哪个更好呢?我想这是许多软件企业都十分关注的问题&#xff0c;今天卓码软件测评小编将对以上问题作出简…...

HTTPS协议:保障网络安全的加密通信协议

在当今数字化时代&#xff0c;网络安全问题备受关注。为了保护用户的隐私和数据安全&#xff0c;HTTPS协议应运而生。本文将介绍HTTPS协议的定义、工作原理以及其在网络通信中的重要性。 一、HTTPS协议的定义 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;…...

C++设计模式_21_Iterator 迭代器(理解;面向对象的迭代器已过时;C++中使用泛型编程的方式实现)

Iterator 迭代器也是属于“数据结构”模式。GoF中面向对象的迭代器已经过时&#xff0c;C中目前使用泛型编程的方式实现&#xff0c;其他语言还在使用面向对象的迭代器。 文章目录 1. 动机(Motivation)2. 模式定义3. Iterator 迭代器代码分析4. 面向对象的迭代器与泛型编程实现…...

有一个 3*4 的矩阵,找出其中值最大的元素,及其行列号

1解题思路&#xff1a; 首先学会输入二维数组&#xff1b;然后知道如何比较求最大值&#xff1b;最后就是格式问题&#xff1b; 2代码&#xff1a; #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体系化稳定性方案

概述&#xff1a;作为一个SRE、运维工程师&#xff0c;当我们在治理系统稳定性时&#xff0c;方法有很多&#xff0c;但往往无从下手。本文以一张逻辑图的形式&#xff0c;为读者提供治理稳定性的体系化思路。 先上图&#xff1a; 1、治理目标 我们做稳定性的目标&#xff0c…...

安卓端GB28181设备接入模块如何实现实时位置订阅(MobilePosition)

技术背景 实时位置&#xff08;MobilePosition&#xff09;订阅和上报&#xff0c;对GB28281设备接入终端尤其重要&#xff0c;如移动单兵设备、执法记录仪、智能安全帽、车载终端等&#xff0c;Android国标接入设备通过获取到实时经纬度信息&#xff0c;按照一定的间隔上报到…...

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&#xff08;实现局域网路由功能)测试运行 安装 DHCP server apt 安装 isc-dhcp-server sudo apt-get install isc-dhcp-server修改配置文件 /etc/dhcp/dhcpd6.conf 内容如下&#xff1a; lease-time 7200; lo…...

分享大数据分析师前景怎么样? 从事行业有哪些?

数据分析师发展前景和待遇怎么样&#xff1f;有前途吗&#xff1f;好找工作吗&#xff1f;根据某招聘网数据显示&#xff0c;当前市场表现为&#xff1a; 2023年较2022年同期对比增长160%&#xff0c;2022年较2021年下降了46%。 工资待遇&#xff1a;2023年较2022年下降了2…...

通过wordpress能搭建有影响力的帮助中心

wordpress建站服务是一种提供简单易用的工具和功能&#xff0c;帮助用户轻松创建和管理网站的服务。它适用于各类网站管理员、个人博主和小型企业主&#xff0c;无论是想要搭建个人博客、展示作品集还是开设在线商店&#xff0c;都可以通过wordpress建站服务来实现。 | 一、搭建…...

word页脚设置,页脚显示第几页共有几页设置步骤

word页脚设置&#xff0c;页脚显示第几页共有几页设置步骤&#xff1a; 具体步骤&#xff1a; 步骤1&#xff1a; 步骤1.1选择页脚---空白页脚 步骤1.2&#xff0c;在"[在此处键入]"&#xff0c;直接输入你需要的格式&#xff0c;如 “第页/共页” 步骤1.3选择第“…...

C语言实现斐波那契数列的多种方法

斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列&#xff0c;因数学家莱昂纳多斐波那契&#xff08;Leonardo Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为“兔子数列”。对于解决此类问题方法有四&#xff0c;前两…...

一文解决:Swagger API 未授权访问漏洞问题

Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面&#xff0c;让开发者可以更方便地查看和测试 API 接口。然而&#xff0c;在一些情况下&#xff0c;未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 …...

Elasticsearch下载安装,IK分词器、Kibana下载安装使用,elasticsearch使用演示

首先给出自己使用版本的网盘链接&#xff1a;自己的版本7.17.14 链接&#xff1a;https://pan.baidu.com/s/1FSlI9jNf1KRP-OmZlCkEZw 提取码&#xff1a;1234 一般情况下 Elastic Search&#xff08;ES&#xff09; 并不单独使用&#xff0c;例如主流的技术组合 ELK&#xff08…...

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…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...