微信小程序组件 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 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
PHP自动更新新闻DIY
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python实现购物车功能的方法分析
2017/11/10 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
《第一朵杏花》教学反思
2014/04/16 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
小学班主任自我评价
2015/03/11 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
女性健康讲座主持词
2015/07/04 职场文书
《秋思》教学反思
2016/02/23 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL