下面的是PPT教程网给你带来的相关内容：

ppt图片滚动循环播放怎么设置:小程序实现循环滚动播放文字

uni-app小程序实现滚动播放文字效果 HTML结构:

    
        
            开始testtesttesttesttesttest到底
        
    

JS:

data() {
            return {
                animationObj: {},
                animation: {}
            }
        },
        methods: {
            loadAnimation() { //初始化动画函数
                let that = this;
                let query = wx.createSelectorQuery();   //创建选择器
                query.select('#box').boundingClientRect(); //获取盒子大小位置等信息的请求（未发送的请求）
                query.select('#text').boundingClientRect(); //同上
                query.exec(function(res){   //发送以上请求，返回的是所有请求的结果数组
                    console.log('请求结果',res);
                    let boxWidth = res[0].width;  //获取外盒子的宽度
                    let textWidth = res[1].width;  //获取文字长度
                    if(boxWidth{ //等dom更新完成后再执行，dom渲染的过程是异步的
                    setTimeout(()=>{ //等动画执行完再进行下一次动画
                        that.startAnimation(boxWidth,textWidth,++step);
                    },duration)
                })
            }
        },
        onLoad(params) {
            this.$nextTick(()=>{
                this.loadAnimation()
            })
        }

CSS：

#box {
    font-weight: bold;
    font-size: 40upx;
    white-space: nowrap;
    width:200upx;
    height:80upx;
    position: relative;   //设置定位才能生效,父元素相对定位
    overflow: hidden;
    background-color: aquamarine;
}
#text {
    color: #000;
    height:80upx;
    display: flex;
    align-items: center;
    position: absolute;  //设置定位才能生效,子元素绝对定位
    line-height: 1em;
}

效果图:

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容ppt图片滚动循环播放怎么设置:小程序实现循环滚动播放文字，请及时与我们联系，并提供相关证据ppt图片滚动循环播放怎么设置，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:

感谢你支持pptjcw.com网，我们将努力持续给你带路更多优秀实用教程！

上一篇：ppt怎么插入表格:为什么这个PPT表格，颜值比你还高？ 下一篇：ppt设置背景图片:如何制作ppt背景图 如何设置ppt背景

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。