微信小程序实现简单文字跑马灯

2024-03-26 10:21:03

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码，供大家参考，具体内容如下

效果如图

WXML

<scroll-view class="container">
 <view class="scrolltxt">
 <view class="marquee_box">
 <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
 <text>{{text}}</text>
 <text style="margin-right:{{marquee_margin}}px;"></text>
 <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>
 </view>
 </view>
 </view>
</scroll-view>

WXSS

.container {display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;}
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}

 data: {
 //滚动字幕
 text: "温馨提示：为了保证其他购买者的利益，每个 账号针对同一商品只允许退款一次，请您谨慎操作。",
 marqueePace: 1,//滚动速度
 marqueeDistance: 0,//初始滚动距离
 marquee_margin: 30,//间距
 size: 14,//字号
 time: '',// 定时器
 },

onHide: function () {
 //清空滚动字幕定时器，避免锁屏或页面隐藏后移动速度越来越快
 clearInterval(this.data.time);
 },

 onShow: function (e) {
 var that = this;
 var length = that.data.text.length * that.data.size;//文字长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 //console.log(length,windowWidth);
 that.setData({
 length: length,
 windowWidth: windowWidth
 });
 that.scrolltxt();// 第一个字消失后立即从右边出现
 },

 /**
 * 滚动字幕
 */
 scrolltxt: function () {
 var that = this;
 var length = that.data.length;//滚动文字的宽度
 var windowWidth = that.data.windowWidth;//屏幕宽度
 var time = this.data.time
 if (length > windowWidth) {
 time = setInterval(function () {
 var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
 var crentleft = that.data.marqueeDistance;
 if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
  that.setData({
  marqueeDistance: crentleft + that.data.marqueePace
  })
 }
 else {
  that.setData({
  marqueeDistance: 0 // 直接重新滚动
  });
  clearInterval(time);
  that.scrolltxt();
 }
 }, 20);
 }
 else {
 that.setData({ marquee_margin: "1000" });//只显示一条不滚动右边间距加大，防止重复显示
 }
 that.setData({
 time:time
 })
 },

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现跑马灯效果

网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字size计算,明显是不准确的计算方式.我看了下,发现可以通过计算控件宽度来精确计算文字宽度,这样实现的跑马灯是比较完善的. 效果如下: 实现代码如下: wxml: <view class="rollCon"> <view class='box'> <view class='text'style='left:{{offsetLeft}}px' >{{text}}&l
微信小程序实现跑马灯效果完整代码(附效果图)

一:功能介绍及讲解实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮,按钮绑定当前的跑马灯信息的id,点击按钮后根据id跳转到相应的文章详情页: 这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前信息的数组下标,实现了动态改变查看按钮绑定信息id值的效果: 如果还有不懂的地方欢迎加入(173683895)微信小程序开发交流群. 二:效果图: 三:完整源码 1.封装成一个组件:  <template
小程序文字跑马灯效果

本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下 market.wxml  <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style=&qu
微信小程序实现文字跑马灯

前言要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口就可以拿到节点长宽等属性,当然你也可以直接用文字数量 * 文字大小(注意字体的单位px,rpx). 效果图短字长字 wxml <view class="content"> <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}p
微信小程序实现文字跑马灯效果

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px
原生小程序封装跑马灯效果

本文实例为大家分享了小程序封装跑马灯效果的具体代码,供大家参考,具体内容如下 Marquee.wxml <view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;"> <view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_m
详解微信小程序实现跑马灯效果（附完整代码）

在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:  <view class="marquee_container" style="--marqueeWidth--:-12em"> <view class="marquee_text">一个人活着就是为了让更多的人更好的活着!</v
微信小程序实现简单跑马灯效果

跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下! 跑马灯效果的制作制作方式很简单,先方上代码,后面会对代码详细讲解一.wxml界面的实现  <view class="example"> <view class="marquee_box"> <view class="marque
微信小程序实现简单文字跑马灯

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下效果如图 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translat
微信小程序swiper实现文字纵向轮播提示效果

摘要小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是swiper了,查了查,还真有vertical这个属性,swiper真好用. 效果体验代码 wxml <view class="swiper-view"> <swiper class="swiper_container" vertical="true" autoplay="true" cir
微信小程序实现简单九宫格抽奖

本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下废话不多说,先上样板图代码就先wxml文件: <view id="container">  <view id="li" class='{{amplification_index===1?"indexli":""}}'> 一等奖 <view></v
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
详解微信小程序-canvas绘制文字实现自动换行

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w
微信小程序实现简单表格

本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下效果图: wxml <view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th "
微信小程序实现简单手写签名组件的方法实例

目录背景: 需求: 效果一.思路二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时三.总结背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果一.思路在微信小程序中,我们使用canvas组件实现.将用户的输入
微信小程序实现简单计算器功能

微信小程序:简单计算器,供大家参考,具体内容如下对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器. 运行截图计算器对于界面美观的要求并不高,只是一些view以及button控件的组合,所以并不需要在界面上费很多功夫.重要的是逻辑层,之所以选择计算器作为上手的第一个项目,因为计算器的逻辑可简可繁,完全可以适应新手对小程序的掌握程度. 主要代码 js: Page({ data: { result:"0",
微信小程序实现简单聊天室

本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下 cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({ /** * 页面的初始数据 */ data: { nickname:'', avatar:'', chatlists:[ { nickname:'小林', avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b
微信小程序实现简单倒计时功能

本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下任务描述: 计时器任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白界面,过2秒后才显示计时界面,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时. 实现效果:根据案例描述做出如下图效果,初始显示空白界面,2秒后显示计时界面(图1),数字为60,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时(图2). index.wxml <!--index.wxm

微信小程序实现简单文字跑马灯

相关推荐

随机推荐