微信小程序组件 marquee实例详解
微信小程序组件 marquee实例详解1. marquee标签html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现。这里考虑使用css3的animation实现。 html的marquee是这样使用的。 2. wxml传入wxml的是个json对象 而那个奇怪的--marqueeWidth是给@keyframes传的变量。内联设置变量,css文件中也可以获取到该变量。 3. wxss.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{
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. 使用// wxss @import "../component/marquee/marquee.wxss"; // js import marquee from '../component/marquee/marquee.js';var options = Object.assign(marquee,{ const str = this.data.marquee.text; 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |