微客导航 » 文章资讯 » 微信小程序实现文字无限轮播效果

微信小程序实现文字无限轮播效果

2023-09-02 05:06:05 152

本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码，供大家参考，具体内容如下

.JS文件 onLoad中添加下列代码

varself=this;
varwidth=wx.getSystemInfoSync().screenWidth;
functioncarousel_num(){

varanimation=wx.createAnimation({
transformOrigin:"50%50%",
duration:5000,
timingFunction:"linear",
delay:0
})
self.animation=animation
animation.translate3d(-width,0,100).step()
console.log("第一动画开始");
self.setData({
animationData_notice:animation.export(),
})
setTimeout(function(){
varanimation=wx.createAnimation({
transformOrigin:"50%50%",
duration:0,
timingFunction:"linear",
delay:0
})
self.animation=animation
animation.translate3d(0,0,100).step()
console.log("第二动画开始");
self.setData({
animationData_notice:animation.export(),
})
setTimeout(function(){
carousel_num();
},50)
},5000)
}
setTimeout(function(){
carousel_num();
},100);

.WXML文件添加如下：





全国快递本月底将陆续停运，各位请注意补货时间！



全国快递本月底将陆续停运，各位请注意补货时间！

.WXSS文件添加如下：

.scroll_notice{
position:absolute;
left:0px;
top:0px;
width:100%;
white-space:nowrap;
height:65rpx;
background-color:#e6513e;
}

.scroll_notice_item_image{
position:absolute;
left:0px;
top:14rpx;
width:49rpx;
height:38rpx;
}

.scroll_notice_item{
margin-left:61rpx;
margin-top:14rpx;
height:37rpx;
font-family:PingFangSC;
font-size:26rpx;
font-weight:500;
letter-spacing:1rpx;
text-align:left;
color:#fff;
}

.scroll_notice_item_bg{
position:relative;
margin-left:20rpx;
height:100%;
display:inline-flex;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现文字无限轮播效果

热门推荐

随机推荐