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

时间:2020-05-16 qq_28707553 人气:0

前言

要实现跑马灯主要就是获得判断开始定界和结束定界, 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 的性能问题, 不用的时候或者不显示的时候将其停止，否则会像作者一样给自己挖坑。

加载全部内容