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

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;}}
}
http://www.dtcms.com/a/299390.html

相关文章:

  • 去除视频字幕 4 : 下一步,打算研究 Video Inpainting (视频修复):
  • MongoDB数据库高并发商业实践优化·运行优化之不可使用root账户进行MongoDB运行-优雅草卓伊凡
  • 【LeetCode 热题 100】79. 单词搜索——回溯
  • 《用于几何广义断层触觉传感的图结构超分辨率:在仿人面部的应用》论文解读
  • Linux随记(二十一)
  • COZE官方文档基础知识解读第六期 ——数据库和知识库
  • 【算法】前缀和经典例题
  • RU 19.28安装
  • ubuntu22.04系统 算力4090服务器 病毒防护 查杀等 运维入门(三)clamAV工具离线查杀
  • C 语言详解:特性、应用与发展
  • UniappDay03
  • 港股历史逐笔十档分钟级订单簿行情数据分析
  • ChibiOS深度解析:硬实时内核的全景剖析与FreeRTOS实战对比
  • 前端组件梳理
  • dify前端应用相关
  • Linux进程:系统运行的核心机制
  • Claude Code PowerShell 安装 MCPs 方法:以 Puppeteer 为例
  • 基于深度学习的食管癌右喉返神经旁淋巴结预测系统研究
  • Effective C++ 条款4:确定对象被使用前已先被初始化
  • Java-数构二叉树
  • 学习嵌入式的第三十一天-数据结构-(2025.7.23)网络协议封装
  • epoll_create1函数含义和使用案例
  • 深度解析【JVM】三大核心架构:运行时数据区、类加载与垃圾回收机制
  • Java大厂经典面试题
  • 复杂产品系统集成协同研发平台的研究与实现
  • @PathVariable与@RequestParam的区别
  • k8s的nodeport和ingress
  • 【区块链安全】DeFi协议安全漏洞深度分析:从闪电贷攻击到MEV套利
  • VTK交互——ImageClip
  • DH和IKE的关系理解