微信小程序中不定长度的滚动字幕效果---wxss中使用js变量

功夫熊猫式浪漫style

已于 2022-07-19 15:15:24 修改

阅读量1.3k

点赞数 1

分类专栏：小程序文章标签： javascript 微信小程序前端

于 2022-07-19 15:15:17 首次发布

本文链接：https://blog.csdn.net/GYHHelloWold/article/details/125872485

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、滚动字幕的效果，文字是动态加载的，长度是不定。

2、利用 animation 写个动画好写，但是animation中需要文字滚动位移的距离，transform: translateX(200px);但是由于文字的长度不知道，200px到底是多少呢？不确定。

3、原生js的写法，肯定就是操作dom对象，利用document.get.......获取dom对象，获取文字的宽度，利用文字的宽度，减去父元素可以显示的宽度，就是需要滚动的距离了。

4、在微信小程序中，没有dom对象，获取部分dom信息需要使用 boundingClientRect 方法

        let companyWidth = 0
        let prjDeptWidth = 0
        let detailsWidth = 0
        const query = wx.createSelectorQuery()
        query.select('#company').boundingClientRect()
        query.exec(function (res) {
            companyWidth = res[0].width
        })
        const query1 = wx.createSelectorQuery()
        const query2 = wx.createSelectorQuery()
        query1.select('#prjDept').boundingClientRect()
        query1.exec(function (res) {
            prjDeptWidth = res[0].width
        })
        query2.select('#detailsWidth').boundingClientRect()
        query2.exec(function (res) {
            detailsWidth = res[0].width
        })

5、公司距离的变化就是文字的长度 - 父元素的宽度

           // 公司名称变化的距离
            const conpanyPositionWidth = `translateX(-${ companyWidth - detailsWidth + 5}px)`
            // 公司部门变化的距离
            const prjDeptPositionWidth = `translateX(-${ prjDeptWidth - detailsWidth + 5}px)`
            that.setData({
                conpanyPositionWidth,
                prjDeptPositionWidth
            })

6、数据知道了，接下来就是把data中的数据放在wxss中。在wxml里面

<view class="details-cont">
                    <view id="prjDept" wx:if="{{flagAnimate}}" style="--prjDeptPositionWidth--:{{prjDeptPositionWidth}};--setPrjDeptTime--:{{setPrjDeptTime}}" class="animatePrjDept">
                        {{userHealthData.prjDept}}
                    </view>
                </view>

7、请仔细看 --prjDeptPositionWidth--:{{prjDeptPositionWidth}}; 写在style中，然后

8.在wxss页面中，这样使用

.animatePrjDept {
    position: absolute;
    left: 0;
    top: 0;
    white-space:nowrap;
    height: 36rpx;
    animation: var(--setPrjDeptTime--);
}
@keyframes wordsLoopPrjDept {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: var(--prjDeptPositionWidth--);
    }
    100% {
        transform: translateX(0);
    }
}

最后看看控制台中显示的数据