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

Posted 夜里码码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序-实现文字跑马灯-wepy相关的知识,希望对你有一定的参考价值。

百度蛮多例子的,但是代码太长懒得看了

前言

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

效果图

短字
技术分享图片
长字
技术分享图片

wxml


<view class="content">
     <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{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();

    }
  }

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

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

来源:https://blog.csdn.net/qq_28707553/article/details/85028122




以上是关于微信小程序-实现文字跑马灯-wepy的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序上拉加载和下拉刷新(wepy)

wepy是一个微信小程序框架

微信小程序wepy-cli使用

微信小程序使用wepy开发之分包操作

微信小程序使用wepy开发之分包操作

原生微信小程序 wepy mpvue对比