• marquee.json
{
"component": true,
"usingComponents": {}
}
  • marquee.wxml
<!--components/marquee.wxml-->
<view class='marquee_container'>
<view class='marquee_text' style='{{ orientation }}:{{ marqueeDistance }}px;font-size: {{size}}px;'>
{{ text }}
</view>
</view>
  • marquee.wxss
/* components/marquee.wxss */
.marquee_container {
position: relative;
width: 100%;
} .marquee_text {
position: absolute;
white-space: nowrap;
top:;
}
  • marquee
// components/marquee.js
Component({
/**
* 组件的属性列表
*/
properties: {
text: {
type: String,
value: 'ILoveEwei'
}
}, /**
* 组件的初始数据
*/
data: {
marqueePace: 1,
marqueeDistance: 0,
size: 14,
orientation: 'left',
interval: 20
}, /**
* 组件的方法列表
*/
methods: {
_scrolling: function() {
var _this = this;
var timer = setInterval(()=> {
if(-_this.data.marqueeDistance < _this.data.length) {
_this.setData({
marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace
})
} else {
clearInterval(timer);
_this.setData({
marqueeDistance: _this.data.windowWidth
});
_this._scrolling();
}
},_this.data.interval);
}
}, created: function() {
var _this = this;
var length = _this.data.text.length * _this.data.size;
var windowWidth = wx.getSystemInfoSync().windowWidth
_this.setData({
length: length,
windowWidth: windowWidth
});
_this._scrolling();
}
})

以上就是我定义在components文件夹的组件,剩下就是引用组件

  • demo.json
{
"usingComponents": {
"marquee": "../../components/marquee"
}
}
  • demo.wxml
<marquee text="我爱你我爱你我爱你"></marquee>  

转 : https://www.jianshu.com/p/0ff03e5e942e

实现一个微信小程序组件:文字跑马灯效果的更多相关文章

  1. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

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

    wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...

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

    百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注 ...

  4. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  5. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  6. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  7. 微信小程序 组件 Demo

    文字跑马灯效果:       http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果:   http://www.wx ...

  8. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  9. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

随机推荐

  1. js中的深复制与浅复制

    前言 所谓深复制与浅复制(深拷贝与浅拷贝),乍一听感觉听高大上,像是一个非常难理解的概念,其实我们平常项目开发都是在用的,只是你可能不知道该怎么叫它的名字而已,就像你听熟了一首歌,就是不知道这首歌叫什 ...

  2. DB2检查数据在各节点分布情况

    情景:总所周知,DB2的表空间(数据)在节点中存储是根据每张表的分区键来分布的,如果分区键建的不好,会直接导致表空间在各节点的占用大小不均匀,久而久之,其中一个或几个节点的大小已所剩无几,其他的却依旧 ...

  3. Redis 从入门到放弃

    Redis 从入门到放弃 http://www.iocoder.cn/Fight/Redis-went-from-getting-started-to-quitting/

  4. 使用Ultra Librarian工具生成Altium封装和原理图符号的方法

    最近在项目中用到了TI的单通道SPDT 模拟开关TS5A3160芯片,Altium官方的库中没有该元件的封装库,所以需要自己画.Ti在官网的产品介绍中提供了生成原理图符号和 PCB 布局封装的方法. ...

  5. 切换Python环境 linux终端命令行

    切换Python环境 conda info -e // 查看有什么环境 source activate env //切换环境 linux终端分屏 terminator  https://www.jia ...

  6. python3 jieba分词

    一.jieba库用于分词,https://github.com/fxsjy/jieba 二.分词:分词精细:全局(文本分析)<精确(快速成词)<搜素(搜素引擎分词) #分词 str=r'今 ...

  7. 在idea中如何将一个项目打成war包

    s会用clean+package两个组合命令.来进行打包,我的war直接打在了target下面.然后,随时可以找到.war文件

  8. PWA相关代码

    sw.js 文件 let CacheName = 'plus-v1'; var filesToCache = [ ]; self.addEventListener('install', functio ...

  9. ajax跨域请求webservice webconfig配置

    <configuration> <system.web> <compilation debug="true" targetFramework=&quo ...

  10. Hive的自定义函数

    功能: 通过人的生日,算出人的生肖和星座. 先在hive中创建一个表: 往这表中导入数据: 导入的数据为: 可以成功查询: 编写自定义函数代码:如下 package cn.tendency.wenzh ...