微信小程序之上下轮播公告小练习
<view class="page">
<view class="prizeList-content" animation="{{animationData}}">
<block wx:for="{{prizeList}}" wx:key="">
<view class="prizeList">
<text>{{item.nickName}}</text>
<text>{{item.prizeName}}</text>
</view>
</block>
</view>
<view class="prizeList-content" animation="{{animationData2}}">
<block wx:for="{{prizeList}}" wx:key="">
<view class="prizeList">
<text>{{item.nickName}}</text>
<text>{{item.prizeName}}</text>
</view>
</block>
</view>
</view>
.page {
width: 600rpx;
padding: 0 20rpx;
height: 300rpx;
background-color: #ff516a;
margin: 300rpx auto 0;
overflow: hidden;
position: relative;
}
.prizeList-content {
width: 100%;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
}
.prizeList {
font-size: 40rpx;
color: #faef09;
}
.prizeList text {
display: inline-block;
text-align: left;
width: 50%;
}
.prizeList text:nth-child(2) {
display: inline-block;
text-align: right;
width: 50%;
}
// pages/prizeList/prizeList.js
Page({
/**
* 页面的初始数据
*/
data: {
prizeList: [{
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, {
nickName: '!mp',
prizeName: 'iphone X'
}, ],
animationData: {},
animationData2: {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 创建 animation 上下文对象
this.animation = wx.createAnimation({
duration: 0,
timingFunction: 'step-start'
});
this.animation2 = wx.createAnimation({
duration: 0,
timingFunction: 'step-start'
});
},
onShow: function(options) {
// 页面出现,调用动画函数
if (this.data.prizeList.length) {
// 梯队运动的距离是 行高*列数
let prizeHeight = this.data.prizeList.length * 52;
this.animationTop(prizeHeight, true);
}
},
onUnload:function() {
let that = this;
clearTimeout(that.timer);
clearTimeout(that.timer2);
clearTimeout(that.timer3);
clearTimeout(that.timer4);
},
animationTop: function(h, isreset) {
let that = this;
// 每次执行动画函数时,先清除定时器
clearTimeout(that.timer);
clearTimeout(that.timer2);
if (isreset) {
// 先把内容位置固定在容器之外,300 是容器的高度
that.animation.top('300rpx').step({
duration: 0,
timingFunction: 'step-start'
});
that.animation2.top('300rpx').step({
duration: 0,
timingFunction: 'step-start'
});
that.setData({
animationData: that.animation.export(),
animationData2: that.animation2.export()
});
// 第一梯队执行动画
setTimeout(function() {
that.animation.top('-' + h + 'rpx').step({
duration: 10000,
timingFunction: 'linear'
})
that.setData({
animationData: that.animation.export()
})
// 第二梯队准备执行动画
that.animationTopCopy(h, isreset);
}, 50)
} else {
// 先将第一梯队归位 而何时归位？ 执行到这一步的时候，第一梯队走完h距离的动画 执行的时间是10000，
// 还要走完容器的高度即看不见第一梯队的时候，让其归位
// 走300rpx需要的时间就是 (300 / (h+300) * 10000）
that.timer = setTimeout(function() {
that.animation.top('300rpx').step({
duration: 0,
timingFunction: 'step-start'
});
that.setData({
animationData: that.animation.export()
})
}, 300 / (h + 300) * 10000);
// 归位之后，第一梯队继续执行动画
that.timer2 = setTimeout(function() {
that.animation.top('-' + h + 'rpx').step({
duration: 10000,
timingFunction: 'linear'
});
that.setData({
animationData: that.animation.export()
});
// 将第二梯队归队 即第一梯队走完300，第二梯队也走了300(动画同步执行)，还需要走完 h 的距离再归位，计算时间是 h /（h+300）*10000
that.animationTopCopy(h, false);
}, h / (h + 300) * 10000);
}
},
animationTopCopy: function(h, isreset) {
let that = this;
if (!isreset) {
that.timer3 = setTimeout(function() {
that.animation2.top('300rpx').step({
duration: 0,
timingFunction: 'linear'
});
that.setData({
animationData2: that.animation2.export()
})
}, 300 / (h + 300) * 10000);
}
// 第二梯队开始动画
that.timer4 = setTimeout(function() {
that.animation2.top('-' + h + 'rpx').step({
duration: 10000,
timingFunction: 'linear'
});
that.setData({
animationData2: that.animation2.export()
})
that.animationTop(h);
}, h / (h + 300) * 10000)
}
})
