微信小程序-实现文字跑马灯-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

原文地址:https://www.cnblogs.com/thatme/p/10192944.html

时间: 2024-11-10 07:38:00

微信小程序-实现文字跑马灯-wepy的相关文章

教你怎么用微信小程序进行文字识别

如果我们想要摘录书本上的文字,其实不一定非要手动打录或者拿笔来摘抄.我们也可以用手机 来进行文字识别,快速的将你想要的文字给识别提取出来,还能节省时间.那我们如何用手机来 进行文字识别呢,最简单的方法还是用微信小程序,无需下载任何APP,点击进去就能使用,下面 小编就来教大家如何用微信小程序来进行文字识别 . 1.首先,我们打开手机微信,点击微信上的搜索框搜索"迅捷文字识别",找到这个小程序,然后点击 进去,进入小程序的界面之后,我们先点击"照片/拍照 ". 2.然

微信小程序 的文字复制功能如何实现?

text设置属性 ?selectable="true" 就可以长按复制了 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言.评论. 原文地址:https://www.cnblogs.com/lovebing/p/8718696.html

微信小程序 canvas 文字自动换行

Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize(14) ctx.setFillStyle('#9E7240') ctx.textAlign="center"; const txHash = this.data.info.txHash ? this.data.info.txHash : '暂无信息' this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行 ctx.draw()

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序开发框架技术选型

目前微信小程序开发有三种方式,原生微信小程序,使用mpVue或wepy微信小程序开发框架. 三种开发方式横向对比资料如下: 原文地址:https://www.cnblogs.com/lhxsoft/p/9020030.html

部署wepy框架开发微信小程序

我用的是yarn,如果你使用的是npm,也可以 首先需要安装wepy命令行工具 npm install wepy-cli -g 然后在选定的位置使用脚手架工具创建wepy项目 wepy init standard yy-cabinet PS C:\Users\gushi\Desktop> wepy init standard yy-cabinet ? Project name yy-cabinet ? Project description 研一智能药剂柜微信小程序项目 ? Author gst

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

这篇随笔主要是记录在用wepy写小程序下拉刷新和上拉加载功能时遇到的数据显示不完全的问题及解决方法. 网上很多关于小程序的上拉加载和下拉刷新的文章的实现方法,无非两种,一是用scroll-view组件,另一种则是使用onReachBottom()和onPullDownRefresh()两个页面事件处理函数. scroll-view实现不好的是不能使用onPullDownRefresh,只能检测滚动到顶部触发刷新或者其它动画操作,以及在其内部使用textarea.map.canvas.video等

使用wepy开发微信小程序的底部导航

前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/ wepy官方文档:https://tencent.github.io/wepy/document.html#/ wepy小程序项目初始化:wepy小程序入门之项目初始化 今天的目标是开发微信小程序的底部导航 效果图: 1.打开编辑器(我用的是vscode),然后打开微信开发者工

wepy是一个微信小程序框架

wepy是一个微信小程序框架,支持模块化开发,开发风格类似Vue.js.可搭配redux使用,能同时打包出web和小程序.官方文档地址 目录结构: sotre: redux(如果你创建项目时使用了redux的话) wepy.config.js: webpack配置文件 app.wpy: 入口文件 project.config.json: 小程序项目配置文件 index.template.html: web页面的入口文件 pages: 存放主页面 components: 存放组件 mixins: