微信小程序组件 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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
node读写Excel操作实例分析
Nov 06 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
为PHP初学者的8点有效建议
2010/11/20 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python实现指定ip端口扫描方式
2019/12/17 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python生成大写32位uuid代码
2020/03/03 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
怎样写留学自荐信
2013/11/11 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
600字作文之感受大自然
2019/11/27 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
html5调用摄像头实例代码
2021/06/28 HTML / CSS