微信小程序组件 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 操作select标签实现代码
May 14 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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 escape URL编码
2008/12/10 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Array对象方法参考
2006/10/03 Javascript
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
基于jquery的表格排序
2010/09/11 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
简单谈谈Python流程控制语句
2016/12/04 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
《胡杨》教学反思
2014/02/16 职场文书
财务简历的自我评价
2014/03/05 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书