小程序实现循环滚动播放文字 2019-07-19- 2021-07-17 569- 2m 小程序-uni-app##uni-app小程序实现滚动播放文字效果 ##HTML结构: 1234567<view> <view id="box"> <text id="text" :animation="animation"> 开始testtesttesttesttesttest到底 </text> </view></view> ##JS: 123456789101112131415161718192021222324252627282930313233343536373839404142data() { 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<textWidth) { //如果文字超出盒子,就滚动播放 that.animationObj = wx.createAnimation(); //创建一个动画实例 animation that.startAnimation(boxWidth,textWidth); } }) }, startAnimation(boxWidth,textWidth,step) { //执行动画函数 let that = this; console.log('执行动画开始'); step == undefined && (step = 0); //第一次进入的时候判断step为0,step只有两种状态,播放滚到最左边(step为0或者2的倍数)和滚到最后边 let speed = 12; //滚动速度 let duration = (textWidth-boxWidth)*1000/speed; //滚动的持续时间 this.animationObj.translateX((!step || step%2==0)?(boxWidth-textWidth):0).step({duration}); //.step执行动画,duration参数为持续时间 this.animation = this.animationObj.export(); //export 方法导出动画数据传递给组件的 animation 属性,执行完export会清除上一次动画 this.$nextTick(()=>{ //等dom更新完成后再执行,dom渲染的过程是异步的 setTimeout(()=>{ //等动画执行完再进行下一次动画 that.startAnimation(boxWidth,textWidth,++step); },duration) }) } }, onLoad(params) { this.$nextTick(()=>{ this.loadAnimation() }) } ##CSS: 123456789101112131415161718#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;} ##效果图: 我很可爱,请给我钱本文作者:小聪忙本文链接:https://cong1223.github.io/2019/07/19/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E5%BE%AA%E7%8E%AF%E6%BB%9A%E5%8A%A8%E6%92%AD%E6%94%BE%E6%96%87%E5%AD%97/版权声明:本博客所有文章除特别声明外,均默认采用 许可协议。
若没有本文 Issue,您可以使用 Comment 模版新建。
GitHub IssuesGitHub Discussions