看了很多的跑马灯都写的不太符合要求，这个跑马灯的需求是初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，本文只做到初始化从屏幕的初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，第三次还是从屏幕的1/2处，这个不知道怎么解决；跪求评论
---最新的版本我来啦，这个问题我解决了，如果需要最新的代码的请拉到最后--哈哈哈哈哈
1.html
<!-- css3跑马灯 -->
<view style="position: relative;height:50rpx;">
<view class="marquee-box">
<view class="off-left marquee2" style="animation-duration:{{timeInterval}}s;">
<view class="first-marquee">
{{marqueeText}}
</view>
<view class="second-marquee">
{{marqueeText}}
</view>
</view>
</view>
</view>
2.css
.marquee-box {
position: relative;
width: 100%;
}
.off-left {
display: flex;
text-align: right;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: marqueeText 30s linear infinite;
animation: marqueeText 30s linear infinite;
}
.first-marquee{
padding-left: 375rpx;
}
.second-marquee{
padding-left: 375rpx;//从屏幕的1/2处开始，第二条间隔屏幕1/2
}
3.js
data={
// marqueeText: '您的年利率为23.976%，基于额度激活前一工作日全国银行间同业拆借中心公布的最新1年期贷款市场报价利率（LPR）4.05% + 13.95%形成。',
marqueeText: '短的跑马灯',
timeInterval: 10
}
async onLoad() {
//创建节点选择器
var query = wx.createSelectorQuery();
//选择id
var that = this;
//计算css3跑马灯的长度
query.select('.marquee2').boundingClientRect(function (rect) {
// 设定每秒移动40px
let timeSet = rect.width / 40 ;
console.log('timeSet1',timeSet);
that.setData({
timeInterval: timeSet
});
}).exec();
}
---------------------以下是解决后的代码
<script>
import { Page } from "@wxa/core";
var app = getApp();
@Page
export default class Index {
data={
marqueeText: '您的年利率为23.976%，基于额度激活前一工作日全国银行间业拆借中心公布的最新1年期。',
timeInterval: 10
}
async onLoad() {
//创建节点选择器
var query = wx.createSelectorQuery();
//选择id
var that = this;
//计算css3跑马灯的长度
query.select('.marquee2').boundingClientRect(function (rect) {
// 设定每秒移动120px
let timeSet = rect.width / 120 ;
console.log('timeSet1',timeSet);
that.setData({
timeInterval: timeSet
});
}).exec();
}
}
</script>
<config>
{
"navigationBarTitleText": "跑马灯"
}
</config>
<template>
<view class="container">
<!-- css3跑马灯 -->
<view style="position: relative;height:50rpx;background: red;">
<view class="marquee-box">
<view class="off-left marquee2" style="animation-duration:{{timeInterval}}s;">
<view class="first-marquee">
1-1{{marqueeText}}
</view>
<view class="second-marquee">
2-2{{marqueeText}}
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
// css3跑马灯
.marquee-box {
position: relative;
width: 100%;
transform: perspective(1000px);
// -webkit-backface-visibility: hidden;
.off-left {
display: flex;
text-align: right;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: marqueeText 30s linear infinite;
animation: marqueeText 30s linear infinite;
// -webkit-backface-visibility: hidden;
.first-marquee, .second-marquee{
-webkit-backface-visibility: hidden;
padding-left: 375rpx;//从屏幕的1/2处开始下一次间隔也是1/2处开始
}
}
}
@keyframes marqueeText {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
}
</style>
