微信小程序组件 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 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
php单例模式示例分享
2015/02/12 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python中static相关知识小结
2018/01/02 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
如何在django中添加日志功能
2020/02/06 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
社区中秋节活动方案
2014/01/29 职场文书
水毁工程实施方案
2014/04/01 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书