(其实我想的很简单,写个animate动画,从0%到100%;left:100%到-100%,需要控制的是计算文字长度和屏幕宽度,控制速度)
布局页面wxml
<view class="notice" style="--marqueeTime--:{
{time}}s;">
<view class="nn">{
{event}}</view>
</view>
小程序js页面
var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
var text = '这是字幕广告测试,时间2019/12/18';
var size = 22; //字体size
var sum = text .length * size + windowWidth; //屏幕宽度+字幕长度
// 速度
var speed = sum / 10;
var time = sum / 73.51875;
console.log(speed);
console.log(time);
that.setData({
time: time,
event:text ,
})
样式页面 wxss 动画
animation-name: around;
animation-duration: var(--marqueeTime--); /*过渡时间 从wxml传过来