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

本文讲解"微信小程序实现文字跑马灯的方法"，用于解决相关问题。

前言

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

效果图

短字

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

长字

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

wxml

<view class="content">
<text class="every" decode="{{true}}" >{{announ}}</text>
</view>

js

我这里用的是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();

}
}

关于 "微信小程序实现文字跑马灯的方法" 就介绍到此。希望多多支持编程宝库。

本文讲解"angular6的table组件开发的实现示例"，用于解决相关问题。背景及吐槽：今年有机会再次接触angualr这个框架，想起第一次接触ng还是16年读书的时候，当时还是ng1，然后 ...