微信小程序文字上下滚动动画效果
其他
2020-04-07 15:58:02
阅读次数: 0
页面
<view class='gold_tip container'>
<view class='list' animation="{{animationData}}">
<view wx:for="{{topList}}" wx:key="{{index}}">
<text>{{item.msg}}</text>
</view>
</view>
</view>
样式
.gold_tip{
width:100%;
height:30px;
line-height:30px;
background-color: #FFCB0B;
overflow: hidden;
}
.gold_tip view{
height: 52rpx;
line-height: 52rpx;
color: #fff;
font-size: 28rpx;
text-align: center;
}
js
onshow:function(){
let that =this
that.getHeight();
} ,
//最上方提示文字上下滚动
util: function (obj) {
// console.log(obj);
//console.log(-obj.list);
var continueTime = (parseInt(obj.list / obj.container) + 1) * 2500;
var setIntervalTime = 50 + continueTime;
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
this.animation = animation;
animation.translateY(obj.container).step({ duration: 50, timingFunction: 'step-start' }).translateY(-obj.list).step({ duration: continueTime });
this.setData({
animationData: animation.export()
})
setInterval(() => {
animation.translateY(obj.container).step({ duration: 50, timingFunction: 'step-start' }).translateY(-obj.list).step({ duration: continueTime });
this.setData({
animationData: animation.export()
})
}, setIntervalTime)
// setInterval(() => {
// animation.translateY(50).step({ duration: 50, timingFunction: 'step-start' }).translateY(-250).step({ duration: 5000 });
// this.setData({
// animationData: animation.export()
// })
// }, 6000)
},
getHeight:function() {
var obj = new Object();
//创建节点选择器
var query = wx.createSelectorQuery();
query.select('.container').boundingClientRect()
query.select('.list').boundingClientRect()
query.exec((res) => {
obj.container = res[0].height; // 框的height
obj.list = res[1].height; // list的height
// return obj;
this.util(obj);
})
}
发布了45 篇原创文章 ·
获赞 20 ·
访问量 5万+
转载自blog.csdn.net/czp555/article/details/84346823