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

(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )

前言

要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口就可以拿到节点长宽等属性，当然你也可以直接用文字数量 * 文字大小(注意字体的单位px,rpx)。

效果图

短字

长字

wxml

<view class="content">
 <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{announ}}</text>
</view>

我这里用的是wepy写的,凑合着看吧

export default class ShopIndex extends wepy.page {

 config = {
 navigationBarTitleText : '首页',
 }

 data = {
 // 公告内容
 announ : '超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度超长度v',
 announNum : 0,
 announy : 280,
 announZf : '-'
 }

 onLoad() {
 
 let self = this;
 var query = wepy.createSelectorQuery();
 query.select('.content').boundingClientRect(ContentRes => {
  var query = wepy.createSelectorQuery();
  query.select('.every').boundingClientRect(TextRes => {

  //加上一百是因为防止在归零时出现闪烁的情况
  let maxContentWidth = ContentRes.width + 100,
  maxTextWidth = TextRes.width;
  //初始化
  self.announNum = TextRes.width
  self.$apply();

  //定时器
  setInterval(()=>{
   if(self.announZf == '-') {
   if(self.announNum <= 0) {
    self.announZf = ''
   } else {
    self.announNum -= 1
   }
   } else {
   if(self.announNum > (maxContentWidth)) {
    //归位
    self.announZf = '-'
    self.announNum = maxTextWidth
   } else {
    self.announNum += 1
   }
   } 
   self.$apply();  
  },5)
  }).exec();
 }).exec();

 }
 }

-----2018-12-24 ----

使用的时候需要注意 setInterval 的性能问题, 不用的时候或者不显示的时候将其停止，否则会像作者一样给自己挖坑。

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

上一篇：JavaScript基础之静态方法和实例方法分析
下一篇：基于JavaScript canvas绘制贝塞尔曲线