【无标题】

{{getList}}

JS
后台返回的数据结构是数组
【无标题】_第1张图片
//处理数据
let listData = res.data.baoming ? res.data.baoming : []
if (listData.length > 60) {
var getData = listData.slice(0, 60)
}
let getArr = []
let getArr1 = []
for (let i = 0; i < getData.length; i++) {
let obj = {}
let obj1 = {}
obj.img = getData[i].username + ’ ’ + getData[i].tel + ’ ’ + '已申请补贴 ’
obj.starspos = 150, //间距
obj1.places = util.spliceItem(getData[i].places)
obj1.username = getData[i].username,
obj1.tel = getData[i].tel,
getArr.push(obj)
getArr1.push(obj1)
}
var sum = ‘’
for (var i = 0; i < getArr.length; i++) {
sum += ’                     ’ + getArr[i].img;
}

that.setData({
getList:arr
})
处理完的数据格式是一个字符串,空格用 代替
【无标题】_第2张图片

CSS
/* 报名横向滚动 */
.box {
position: fixed;
z-index: 999;
width: 750rpx;
overflow: hidden;
background-color: black;
opacity: 0.7;
height: 60rpx;
line-height: 60rpx;
box-sizing: border-box;
}

.r {
white-space: nowrap;
animation:30s loop linear infinite normal;
display: inline-block;
vertical-align: top;
font-size: 24rpx;
color: white;
}
.s {
white-space: nowrap;
animation:200s loop linear infinite normal;
display: inline-block;
vertical-align: top;
font-size: 24rpx;
color: white;
}
.n{
white-space: nowrap;
animation:0s loop linear infinite normal;
display: inline-block;
vertical-align: top;
font-size: 24rpx;
color: black;
}
@keyframes loop {
0% {
transform: translateX(350px);
-webkit-transform: translateX(350px);
}

100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}

@-webkit-keyframes loop {
0% {
transform: translateX(300px);
-webkit-transform: translateX(300px);
}

100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
/* 以上截止报名滚动 */

你可能感兴趣的:(小程序,css,html,css3)