微客导航 » 文章资讯 » 微信小程序组件 marquee实例详解

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

2024-02-18 02:31:05 241

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

1.marquee标签

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

html的marquee是这样使用的。


helloworld

2.wxml


{{marquee.text}}

传入wxml的是个json对象

marquee:{
width:12,
text:'helloworld'
}

而那个奇怪的--marqueeWidth是给@keyframes传的变量。内联设置变量，css文件中也可以获取到该变量。

3.wxss

@keyframesaround{
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

exportdefault{
getWidth:(str)=>{
return[].reduce.call(str,(pre,cur,index,arr)=>{
if(str.charCodeAt(index)>255){//charCode大于255是汉字
pre++;
}else{
pre+=0.5;
}
returnpre;
},0);
},
getDuration:(str)=>{//保留，根据文字长度设置时间
returnthis.getWidth()/10;
}
}

以上是组件的封装。

5.使用

//wxml

//wxss
@import"../component/marquee/marquee.wxss";
//js
importmarqueefrom'../component/marquee/marquee.js';

varoptions=Object.assign(marquee,{
data:{
motto:'HelloWorld',
userInfo:{},
marquee:{text:'你好，中国！hello,world!'}
},
onLoad:function(){
//...

conststr=this.data.marquee.text;
constwidth=this.getWidth(str);
console.log('width',width);
this.setData({[`${'marquee'}.width`]:width});
}
});
Page(options);

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐