汽车微信小程序生成_微信小程序完成文字跑马灯

微信小程序实现文字跑马灯       这篇文章主要为大家详细介绍了微信小程序实现文字跑马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

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

效果图

短字

长字

wxml

 view 
 text 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();

----- ----

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

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


相关阅读