微信小程序组件 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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jquery 模板的应用示例
Nov 12 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
JS将unicode码转中文方法
May 08 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
原型和原型链 prototype和proto的区别详情
Nov 02 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
商场消防管理制度
2014/01/12 职场文书
食品安全承诺书
2014/05/22 职场文书
法人代表证明书格式
2014/10/01 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers