微信小程序组件 marquee实例详解


Posted in Javascript onJune 23, 2017

微信小程序组件 marquee实例详解

1. marquee标签

html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现。这里考虑使用css3的animation实现。

html的marquee是这样使用的。

<marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="200" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
   hello world
</marquee>

2. wxml

<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em">
  <view class="marquee_text">{{marquee.text}}</view>
</view>

传入wxml的是个json对象

marquee:{
  width:12,
  text:'hello world'
}

而那个奇怪的--marqueeWidth是给@keyframes传的变量。内联设置变量,css文件中也可以获取到该变量。

3. wxss

@keyframes around {
  from {
   margin-left: 100%;
  }
  to {
   margin-left: var(--marqueeWidth--);// var接受传入的变量
  }
 }

.marquee_container{
 background-color: #0099FF;
 height: 1.2em;
 position: relative;
 width: 100%;
}
.marquee_container:hover{
 animation-play-state: paused; // 不起作用
}
.marquee_text{
 display: inline-block;
 white-space: nowrap;
 animation-name: around;
 animation-duration: 5s;
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}

4. js

export default {
 getWidth:(str)=>{
  return [].reduce.call(str, (pre, cur, index, arr) => {
   if (str.charCodeAt(index) > 255) {// charCode大于255是汉字
    pre++;
   } else {
    pre += 0.5;
   }
   return pre;
  }, 0);
 },
 getDuration:(str)=>{// 保留,根据文字长度设置时间
  return this.getWidth()/10;
 }
}

以上是组件的封装。

5. 使用

// wxml
<include src="../component/marquee/marquee.wxml" />
// wxss
@import "../component/marquee/marquee.wxss";
// js
import marquee from '../component/marquee/marquee.js';

var options = Object.assign(marquee, {
 data: {
  motto: 'Hello World',
  userInfo: {},
  marquee: { text: '你好,中国!hello,world!' }
 },
 onLoad: function () {
  // ...

  const str = this.data.marquee.text;
  const width = this.getWidth(str);
  console.log('width',width);
  this.setData({ [`${'marquee'}.width`]: width });
 }
});
Page(options);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 #Javascript
vue数据双向绑定的注意点
Jun 23 #Javascript
Vue.js常用指令的使用小结
Jun 23 #Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 #Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 #Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
You might like
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
初探nodeJS
2017/01/24 NodeJs
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
简单实现python数独游戏
2018/03/30 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python自动下载图片的方法示例
2020/03/25 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
计算机科学系职业生涯规划书
2014/03/08 职场文书
会计专业求职信
2014/08/10 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL