uni-app - 文字上下循环滚动翻滚，类似中奖名单与公告栏信息公示等等，自定义组件封装，支持 DIY（适用于新闻动态、公告上下滚动列表、上下循环滚动，无限上下自动滚动列表）兼容小程序/H5/App

2023-11-02 08:40
文章标签 自定义 封装 组件 app 自动 循环 uni 列表 无限 兼容 适用 h5 滚动 diy 公示 名单 中奖 公告栏 翻滚 新闻动态

本文主要是介绍uni-app - 文字上下循环滚动翻滚，类似中奖名单与公告栏信息公示等等，自定义组件封装，支持 DIY（适用于新闻动态、公告上下滚动列表、上下循环滚动，无限上下自动滚动列表）兼容小程序/H5/App，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

如果您需要 “列表式（如下所示）” 多个同时上下翻滚，请选择并访问：uni-app 版 | 微信小程序版

在这里插入图片描述

本文实现了 单行文字上下循环滚动，类似营销页面顶部的获奖名单、信息公示等效果，

以自定义组件形式进行了封装（方便复用），uni-app 全端兼容，如下图所示：

您只需要一键复制便可使用，灵活更改样式与逻辑，轻松移植到您的项目中。

在这里插入图片描述

组件源码

组件名称和位置无所谓，确保后续页面使用正常引入即可。

打开项目 components 文件夹，

在里面新建一个 textroll.vue 文件，一键复制以下全部代码：

这篇关于uni-app - 文字上下循环滚动翻滚，类似中奖名单与公告栏信息公示等等，自定义组件封装，支持 DIY（适用于新闻动态、公告上下滚动列表、上下循环滚动，无限上下自动滚动列表）兼容小程序/H5/App的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/329442。

相关文章

公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
阅读更多...
ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译 在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味着功能上的局限性，当传输一些复杂的数据，比如:
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
一道经典Python程序样例带你飞速掌握Python的字典和列表

一道经典Python程序样例带你飞速掌握Python的字典和列表

Python中的列表（list）和字典（dict）是两种常用的数据结构，它们在数据组织和存储方面有很大的不同。 列表（List） 列表是Python中的一种有序集合，可以随时添加和删除其中的元素。列表中的元素可以是任何数据类型，包括数字、字符串、其他列表等。列表使用方括号[]表示，元素之间用逗号,分隔。 定义和使用 # 定义一个列表 fruits = ['apple', 'banana
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...
时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

NTP 是什么？   NTP 是网络时间协议（Network Time Protocol），它用来同步网络设备【如计算机、手机】的时间的协议。 NTP 实现什么目的？   目的很简单，就是为了提供准确时间。因为我们的手表、设备等，经常会时间跑着跑着就有误差，或快或慢的少几秒，时间长了甚至误差过分钟。 NTP 服务器列表 最常见、熟知的就是 www.pool.ntp.org/zo
阅读更多...
python实现最简单循环神经网络(RNNs)

python实现最简单循环神经网络(RNNs)

Recurrent Neural Networks（RNNs） 的模型： 上图中红色部分是输入向量。文本、单词、数据都是输入，在网络里都以向量的形式进行表示。 绿色部分是隐藏向量。是加工处理过程。 蓝色部分是输出向量。 python代码表示如下： rnn = RNN()y = rnn.step(x) # x为输入向量，y为输出向量 RNNs神经网络由神经元组成， python
阅读更多...
uniapp H5打开地图

uniapp H5打开地图

manifest.json文件，源码视图找到H5添加下面内容 "h5" : {"sdkConfigs" : {"maps" : {"amap" : {"key" : "**********************","securityJsCode" : "****************************","serviceHost" : ""}}}} 高德开放平台 申请时选择（W
阅读更多...
axios全局封装AbortController取消重复请求

axios全局封装AbortController取消重复请求

为什么？ 问题：为什么axios要配置AbortController？防抖节流不行吗？ 分析： 防抖节流本质上是用延时器来操作请求的。防抖是判断延时器是否存在，如果存在，清除延时器，重新开启一个延时器，只执行最后一次请求。节流呢，是判断延时器是否存在，如果存在，直接return掉，直到执行完这个延时器。事实上，这些体验感都不算友好，因为对于用户来说，得等一些时间，尤其是首次请求，不是那么流畅
阅读更多...
WordPress网创自动采集并发布插件

WordPress网创自动采集并发布插件

网创教程：WordPress插件网创自动采集并发布 阅读更新：随机添加文章的阅读数量，购买数量，喜欢数量。 使用插件注意事项 如果遇到404错误，请先检查并调整网站的伪静态设置，这是最常见的问题。需要定制化服务，请随时联系我。 本次更新内容 我们进行了多项更新和优化，主要包括： 界面设置：用户现在可以更便捷地设置文章分类和发布金额。代码优化：改进了采集和发布代码，提高了插件的稳定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2