微信小程序动态数据跑马灯组件编写
开发必备：熟悉微信小程序组件开发
开发思路：如果只有一条数据，直接用css3关键帧动画；如果有多条数据，则在当前动画运动到一定时间的时候，将其数据替换掉，使之在视觉效果上有一个从下到上播放的状态。数组循环播放的状态是通过将当前播放元素置换到末尾实现，即通过数组元素删除插入方法将整个数组元素串成一个闭环。
本例是将跑马灯作为一个公共组件开发的，故代码展示为组件形式
目标UI：
wxml文件代码：
<view wx:if="{{lampData && lampData.length > 0}}" class="lamp-bg">
<view wx:if="{{showItem}}" class="lamp-content box box-lr box-align-center">
<image src="{{lampData[0].avatar}}" class="avatar" />
<view class="lamp-txt">{{lampData[0].desc}}</view>
</view>
</view>
wxss文件代码：
.lamp-bg {
width: 490rpx;
height: 56rpx;
background: #a50519;
border-radius: 30rpx;
overflow: hidden;
}
.lamp-content {
position: relative;
top: 60rpx;
left: 0;
animation: horseRunAnimate 2s linear infinite normal;
}
.avatar {
width: 44rpx;
height: 44rpx;
display: inline-block;
border-radius: 50%;
margin-left: 16rpx;
margin-top: 6rpx;
}
.lamp-txt {
font-size: 26rpx;
color: #fff;
display: inline;
margin-left: 6rpx;
position: relative;
top: -10rpx;
}
@keyframes horseRunAnimate {
0% {
position: relative;
top: 60rpx;
left: 0;
}
25% {
position: relative;
top: 0;
left: 0;
}
50% {
position: relative;
top: 0;
left: 0;
}
75% {
position: relative;
top: 0;
left: 0;
}
100% {
position: relative;
top: -60rpx;
left: 0;
}
}
json文件代码：
{
"component": true,
"usingComponents": {}
}
js代码：
let internal = '';
Component({
options: {
multipleSlots: true
},
properties: {
lampData: {
type: Array,
value: [{ avatar: '', text: 'hhhh' }, { avatar: '', desc: 'aaaa' }],
observer() {
this.startAnimate();
}
}
},
data: {
showItem: true
},
attached() {
this.setItemStatus();
},
pageLifetimes: {
show() {
this.setData({
showItem: true
});
this.startAnimate();
},
hide() {
clearInterval(internal); // 组件所在页面隐藏时清除setInterval，是为了解决页面跳转后返回时setInterval带来的动画时差，在页面上bug提现为：两条数据更替时有跳动现象或者数据渲染延迟
this.setData({
showItem: false
});
}
},
methods: {
setItemStatus() {
if (this.data.lampData.length > 1) {
setTimeout(() => {
this.setData({
showItem: false
});
}, 1800); // 添加showItem属性值是为了解决两条数据更替是页面延迟渲染的问题
}
},
startAnimate() {
const initArr = this.data.lampData;
if (initArr.length > 1) { // 轮播总数大于1时，才执行数组首位删除并插入末尾操作
internal = setInterval(() => {
const firstEle = initArr[0];
initArr.shift();
initArr.push(firstEle);
this.setData({
lampData: initArr,
showItem: true
});
}, 2000);
}
}
}
});
引用该组件wxml文件代码片段：
<view class="horse-run-lamp">
<horserunlamp lampData="{{pageData.success_users}}"/>
</view>
引用该组件json文件代码片段：
{
"navigationBarTitleText": "test页面",
"usingComponents": {
"horserunlamp": "../../../../components/HoseRunLamp/index"
}
}
