微信小程序组件 marquee实例详解

微信小程序组件 marquee实例详解

微信小程序组件 marquee实例详解

1. marquee标签

html是有marquee标签的，可以实现跑马灯效果，但小程序没有，所以要实现。这里考虑使用css3的animation实现。

html的marquee是这样使用的。

hello world

2. wxml

{{marquee.text}}

传入wxml的是个json对象

marquee:{

width:12,

tehttp://xt:'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; // 不起作用

}

.mhttp://arquee_text{

display: inline-block;

white-space: nowrap;

animation-name: around;

animation-duration: 5s;

animation-iteration-count: infinite;

animation-timing-function:lineahttp://r;

}

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

// 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);

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。