本文实例为大家分享了小程序封装跑马灯效果的具体代码，供大家参考，具体内容如下Marquee.wxml




{{item.img}}








{{item.img}}



Marquee.wxss
@keyframes around {
from {
margin-left: 100%;
}

to {
margin-left: var(--marqueeWidth--);
}
}

.marquee_container {
/* background-color: #0099FF; */
padding: 12rpx 0;
position: relative;
width: 100%;
/* height: 50rpx; */

}

.marquee_text {
display: flex;
white-space: nowrap;
animation-name: around;
animation-duration: var(--speed--);
animation-iteration-count: infinite;
animation-timing-function: linear;
line-height: 50rpx;
}

.marquee_tit {
height: 50rpx;
line-height: 50rpx;
position: absolute;
padding-left: 22rpx;
}
@keyframes around {
from {
margin-left: 100%;
}

to {
margin-left: var(--marqueeWidth--);
}
}

.marquee_container {
/* background-color: #0099FF; */
padding: 12rpx 0;
position: relative;
width: 100%;
/* height: 50rpx; */

}

.marquee_text {
display: flex;
white-space: nowrap;
animation-name: around;
animation-duration: var(--speed--);
animation-iteration-count: infinite;
animation-timing-function: linear;
line-height: 50rpx;
}

.marquee_tit {
height: 50rpx;
line-height: 50rpx;
position: absolute;
padding-left: 22rpx;
}Marquee.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
title: {
// 属性名

type: String,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

value: '标题' , // 属性初始值（可选），如果未指定则会根据类型选择一个

observer: function (newVal) {

this.setData({

'data[0].img': newVal

})

this.run()

}
}
},
data: {
data: [

{

img: "",

}
],
broadcast_arr: {

speed: 5, //滚动速度，每秒5个字

font_size: "16", //字体大小(px)

text_color: "#de8c17", //字体颜色

back_color: "#fffbe8", //背景色
}
},

/**
* 生命周期函数--监听页面加载
*/
methods: {
run() {

let ititdata = this.data.data,

assist = this.data.broadcast_arr,

this_width = 0,

spacing = 0,

speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距离


for (let i in ititdata) {

ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕宽度为间距

this_width += (ititdata[i].img.length-12) * this.data.broadcast_arr.font_size;

if (i != ititdata.length - 1) {

spacing += ititdata[i].starspos

}

}

let total_length = this_width + spacing;//总长

assist.time = total_length / speed; /**滚动时间*/

assist.width_mal = total_length;

this.setData({

broadcast_arr: assist,

data: ititdata

})
}
}
})
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
title: {
// 属性名

type: String,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

value: '标题' , // 属性初始值（可选），如果未指定则会根据类型选择一个

observer: function (newVal) {

this.setData({

'data[0].img': newVal

})

this.run()

}
}
},
data: {
data: [

{

img: "",

}
],
broadcast_arr: {

speed: 5, //滚动速度，每秒5个字

font_size: "16", //字体大小(px)

text_color: "#de8c17", //字体颜色

back_color: "#fffbe8", //背景色
}
},

/**
* 生命周期函数--监听页面加载
*/
methods: {
run() {

let ititdata = this.data.data,

assist = this.data.broadcast_arr,

this_width = 0,

spacing = 0,

speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距离


for (let i in ititdata) {

ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕宽度为间距

this_width += (ititdata[i].img.length-12) * this.data.broadcast_arr.font_size;

if (i != ititdata.length - 1) {

spacing += ititdata[i].starspos

}

}

let total_length = this_width + spacing;//总长

assist.time = total_length / speed; /**滚动时间*/

assist.width_mal = total_length;

this.setData({

broadcast_arr: assist,

data: ititdata

})
}
}
})index引入—index.json
{
"usingComponents": {
"marquee":"/components/Marquee/Marquee"
},

{
"usingComponents": {
"marquee":"/components/Marquee/Marquee"
},
index.wxml





index.js
onReady:function(){
this.marquee=this.selectComponent('#marquee')
this.marquee.run()
},
onReady:function(){
this.marquee=this.selectComponent('#marquee')
this.marquee.run()
},以上就是本文的全部内容，希望对大家的学习有所帮助。