微信小程序跑马灯效果怎么弄
- 时间:
- 来源: 网络
效果
wxml
1显示完后再显示
{{text}}
2出现白边后即显示
{{text}}
{{text}}
wxss
.example{
display:block;
width:100%;
height:100rpx;
}
.marquee_box{
width:100%;
position:relative;
}
.marquee_text{
white-space:nowrap;
position:absolute;
top:0;
}
js
//pages/home/marquee/marquee.js
Page({
data:{
text:'这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈',
marqueePace:1,//滚动速度
marqueeDistance:0,//初始滚动距离
marqueeDistance2:0,
marquee2copy_status:false,
marquee2_margin:60,
size:14,
orientation:'left',//滚动方向
interval:20//时间间隔
},
onShow:function(){
//页面显示
varvm=this;
varlength=vm.data.text.length*vm.data.size;//文字长度
varwindowWidth=wx.getSystemInfoSync().windowWidth;//屏幕宽度
vm.setData({
length:length,
windowWidth:windowWidth,
marquee2_margin:length }); vm.run1();//水平一行字滚动完了再按照原来的方向滚动 vm.run2();//第一个字消失后立即从右边出现 }, run1:function(){ varvm=this; varinterval=setInterval(function(){ if(-vm.data.marqueeDistance vm.setData({ marqueeDistance:vm.data.marqueeDistance-vm.data.marqueePace, }); }else{ clearInterval(interval); vm.setData({ marqueeDistance:vm.data.windowWidth＜/span> }); vm.run1(); } },vm.data.interval); }, run2:function(){ varvm=this; varinterval=setInterval(function(){ if(-vm.data.marqueeDistance2 //如果文字滚动到出现marquee2_margin=30px的白边，就接着显示 vm.setData({ marqueeDistance2:vm.data.marqueeDistance2-vm.data.marqueePace, marquee2copy_status:vm.data.length+vm.data.marqueeDistance2<=vm.data.windowWidth+vm.data.marquee2_margin, }); }else{ if(-vm.data.marqueeDistance2>=vm.data.marquee2_margin){//当第二条文字滚动到最左边时 vm.setData({ marqueeDistance2:vm.data.marquee2_margin//直接重新滚动 }); clearInterval(interval); vm.run2(); }else{ clearInterval(interval); vm.setData({ marqueeDistance2:-vm.data.windowWidth＜/span> }); vm.run2(); } } },vm.data.interval); } })