小程序跑马灯首尾无缝链接

看了很多的跑马灯都写的不太符合要求，这个跑马灯的需求是初始化从屏幕的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>