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

2024-12-04 10:16:31

网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字size计算，明显是不准确的计算方式。我看了下，发现可以通过计算控件宽度来精确计算文字宽度，这样实现的跑马灯是比较完善的。

效果如下：

实现代码如下：

wxml:

<view class="rollCon">
 <view class='box'>
 <view class='text'style='left:{{offsetLeft}}px' >{{text}}</view>
</view>
</view>

wxss:

.rollCon {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60rpx;
 z-index: 100;
 background: #fde8c7;
 font-size: 20rpx;
 line-height: 60rpx;
}

.box {
 width: 100%;
 position: relative;
}

.text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 font-size: 24px;
}

js:

Page({

 /**
  * 页面的初始数据
  */
 data: {
  interval: null,
  text: '995年JavaScript诞生时如早一年',
  pace: 1.2, //滚动速度
  interval: 20, //时间间隔
  size: 24, //字体大小in px
  length: 0, //字体宽度
  offsetLeft: 0, //
  windowWidth: 0,
 },
 //根据viewId查询view的宽度
 queryViewWidth: function(viewId) {
  //创建节点选择器
  return new Promise(function(resolve) {
   var query = wx.createSelectorQuery();
   var that = this;
   query.select('.' + viewId).boundingClientRect(function(rect) {
    resolve(rect.width);
   }).exec();
  });

 },
 //停止跑马灯
 stopMarquee: function() {
  var that = this;
  //清除旧的定时器
  if (that.data != null) {
   clearInterval(that.interval);
  }
 },
 //执行跑马灯动画
 excuseAnimation: function() {
  var that = this;
  if (that.data.length > that.data.windowWidth) {
   //设置循环
   let interval = setInterval(function() {
    if (that.data.offsetLeft <= 0) {
     if (that.data.offsetLeft >= -that.data.length) {
      that.setData({
       offsetLeft: that.data.offsetLeft - that.data.pace,
      })
     } else {
      that.setData({
       offsetLeft: that.data.windowWidth,
      })
     }
    } else {
     that.setData({
      offsetLeft: that.data.offsetLeft - that.data.pace,
     })
    }
   }, that.data.interval);
  }
 },
 //开始跑马灯
 startMarquee: function() {
  var that = this;
  that.stopMarquee();
  //初始化数据
  that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
  that.queryViewWidth('text').then(function(resolve) {
   that.data.length = resolve;
   console.log(that.data.length + "/" + that.data.windowWidth);
   that.excuseAnimation();
  });
 }
 })

源码下载：跑马灯效果

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

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

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

本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下 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
微信小程序实现跑马灯效果完整代码(附效果图)

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

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

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

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

本文实例为大家分享了小程序封装跑马灯效果的具体代码,供大家参考,具体内容如下 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
小程序实现跑马灯效果

本文实例为大家分享了小程序实现跑马灯效果的具体代码,供大家参考,具体内容如下先看效果图实现步骤: index.wxml文件  <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{m
微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat
微信小程序左滑删除效果的实现代码

今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个
微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

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

相关推荐

随机推荐