微信小程序从右向左无限滚动组件封装(类似公告)

devtools/2025/3/16 21:21:40/

组件代码

wxml代码

<view class="container"><view class="text-wrapper"><!-- 这两个都不能删除,用来放无限滚动的,第一个滚完第二个接上,第二个滚完第一个又接上了 --><text class="scroll-text text1" style="left: {{-moveleft}}px;">{{ scrollText }}</text><text class="scroll-text text2" style="left: {{ moveleft2}}px;">{{ scrollText }}</text></view>
</view>

wxss代码

.container {display: flex;width: 100vw;
}.text-wrapper {display: flex;width: 100vw;height: 50rpx;overflow: hidden;position: relative;margin-right: 20rpx;margin-left: 20rpx;
}.scroll-text {white-space: nowrap;
}.text1 {position: absolute;white-space: pre;font-size: 26.37rpx;line-height: 28rpx;color: #FAEECC;
}.text2 {position: absolute;white-space: pre;font-size: 26.37rpx;line-height: 28rpx;color: #FAEECC;
}

js代码

Component({/*** 组件的属性列表*/properties: {// 两文本的内容间隔interval_widgth: {type: Number,value: 10},scrollText:{type:String,value:'这里是需要无缝滚动的文本,用于检测滚动效果是否正常!'}},/*** 组件的初始数据*/data: {moveleft:0,moveleft2:0,text_width:0,timer:null},/*** 组件的方法列表*/methods: {},lifetimes: {attached() {},ready() {// 获取内容的宽度const query = wx.createSelectorQuery().in(this);query.select('.scroll-text').boundingClientRect().exec((res) => {this.setData({'text_width':res[0].width,moveleft2: res[0].width+this.data['interval_widgth']})});},detached(){clearInterval(this.data.timer);}},pageLifetimes: {show() {this.data.timer=setInterval(()=>{if(this.data.moveleft>=this.data.text_width+this.data.interval_widgth){this.setData({moveleft:-(this.data.interval_widgth+this.data.text_width)})};if(-(this.data.moveleft2)>=this.data.text_width+this.data.interval_widgth){this.setData({moveleft2:(this.data.interval_widgth+this.data.text_width)})};this.setData({moveleft:this.data.moveleft+2,moveleft2:this.data.moveleft2-2})},20)},hide(){clearInterval(this.data.timer);}}})

页面使用

在页面的json文件引入组件

{"usingComponents": {"gundong": "../../components/gundong/gundong"}
}

使用

<gundong></gundong>

这里也支持传值,如果封装的值或者样式不满足需求可以修改组件传入更多数据,不影响滚动功能即可


http://www.ppmy.cn/devtools/167649.html

相关文章

基于Python的PDF转PNG可视化工具开发

基于Python的PDF转PNG可视化工具开发 一、引言 在数字文档处理领域&#xff0c;PDF到图像格式的转换是常见需求。本文介绍如何利用Python的PyMuPDF库和Tkinter框架&#xff0c;开发一个带图形界面的PDF转PNG工具。该工具支持页面选择、分辨率调整等功能&#xff0c;并具有友好…

Qt 实现波浪填充的圆形进度显示

话不多说&#xff0c;先上效果图 代码示例&#xff1a; #include <QApplication> #include <QWidget> #include <QPainter> #include <QPropertyAnimation> #include <QTimer> #include <cmath>class WaveProgressBar : public QWidget {…

C51点灯学习

#点灯环节 点亮第一个灯 原理:从VCC正极电极过来&#xff0c;若碰到的组件是 1&#xff0c;那么就会不亮(因为两个都是高电平),若碰到的组件是 0,则会通过高低电平来促使灯发亮 #include <REGX52.H>void main() {P2 0xFE;//由高往低数(从P27 ~ P20)1111 1110 }让灯交…

网络空间安全(32)Kali MSF基本介绍

前言 Metasploit Framework&#xff08;简称MSF&#xff09;是一款功能强大的开源安全漏洞检测工具&#xff0c;被广泛应用于渗透测试中。它内置了数千个已知的软件漏洞&#xff0c;并持续更新以应对新兴的安全威胁。MSF不仅限于漏洞利用&#xff0c;还包括信息收集、漏洞探测和…

【Rust】枚举和模式匹配——Rust语言基础14

文章目录 1. 枚举类型1.2. Option 枚举 2. match 控制流结构2.1. match 对绑定值的匹配2.2. Option<T> 的匹配2.3. 通配模式以及 _ 占位符 3. if let 控制流4. 小测试 1. 枚举类型 枚举&#xff08;enumerations&#xff09;&#xff0c;也被称作 enums。枚举允许你通过…

【虚幻C++笔记】引擎源码下载及编译步骤

目录 1.在GitHub上访问虚幻引擎源代码2.安装Visual Studio 20223.解压完成以后&#xff0c;打开源码的根目录&#xff0c;选择Setup.bat运行4.选择GenerateProjectFiles.bat运行,生成uE5.sln文件&#xff0c;点击这个文件打开项目5.设置编译的选项&#xff0c;选择DevelopmentE…

XSS跨站脚本攻击

1、什么是XSS攻击 XSS全称&#xff08;Cross Site Scripting&#xff09;跨站脚本攻击&#xff0c;为了避免与css层叠样式表名称冲突&#xff0c;所以改为xss&#xff0c;是最常见的web应用程序安全漏洞之一。它指的是恶意攻击者往web页面里插入恶意html代码&#xff08;JavaS…

UI-APP---基于HBuilder X的微信小程序

目录 概要 Uni-app 和 HBuilderX 的关系 技术名词解释 ui-app: 概念&#xff1a; 核心特点&#xff1a; 技术细节 基本步骤&#xff1a; 开发流程 项目功能分析&#xff1a; ①首页包括公共头部、导航栏、轮播图、视频列表区域。 ②视频详情页包括公共头部区域、视频详情区域、…