本文实例为大家分享了小程序封装跑马灯效果的具体代码，供大家参考，具体内容如下
Marquee.wxml
|
1
2
3
4
5
6
7
8
9
|
<view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;">
<view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_mal}}px;--speed--:{{broadcast_arr.time}}s;width:{{broadcast_arr.width_mal}}px;'>
<block wx:for="{{data}}" wx:key='index'>
<view style='color:{{broadcast_arr.text_color}};margin-left:{{index!=0?item.starspos*2:0}}rpx;'>
{{item.img}}
</view>
</block>
</view>
</view>
|
Marquee.wxss
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
@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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
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
|
1
2
3
4
|
{
"usingComponents": {
"marquee":"/components/Marquee/Marquee"
},
|
index.wxml
|
1
2
3
|
<!--跑马灯 Linyufan.com-->
<marquee id='marquee' title='江龙：每日惠自提店铺特价啦~店铺特价啦~店铺特价啦~'></marquee>
<!--跑马灯-->
|
index.js
|
1
2
3
4
|
onReady:function(){
this.marquee=this.selectComponent('#marquee')
this.marquee.run()
},
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_44816309/article/details/108519390