小程序实现文字切换动画-优快云博客

本文链接：https://blog.youkuaiyun.com/u012011360/article/details/80181300

本文介绍如何在小程序中实现文字内容的动态变化动画，通过调整一个线程控制多个文案的切换，解决了多线程导致的问题，提供了wxml、wxss和js的相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中要求几处文案一直变化，并在最后固定一个文案，一开始想使用多个setInterval来控制这几处文案，但是发现多线程总是出问题，现在改成了一个线程来控制这几处文案的变化

效果图：

wxml文件：

 
  < 
  view 
  class= 
  'detailTopTextCon' 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText1 detailTopAnimate1' 
  >{
  {text1}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText2 detailTopAnimate2' 
  >{
  {text2}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText3 detailTopAnimate3' 
  >{
  {text3}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText4 detailTopAnimate4' 
  >{
  {text4}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText5 detailTopAnimate5' 
  >{
  {text5}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText6 detailTopAnimate6' 
  >{
  {text6}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText7 detailTopAnimate7' 
  >{
  {text7}} 
  </ 
  label 
  > 
 
 
  < 
  label 
  class= 
  'detailTopText detailTopText8 detailTopAnimate8' 
  >{
  {text8}} 
  </ 
  label 
  > 
 
 
  </ 
  view 
  > 
 

wxss文件：

 
  /* pages/test/test.wxss */ 
 
  page 
  {
    
  background: 
  none 
  ; 
 
  } 
 
  .detailTopTextCon 
  {
    
  width: 
  680 
  rpx 
  ; 
 
  margin: 
  0 
  auto 
  ; 
 
  margin-top: 
  370 
  rpx 
  ; 
 
  position: 
  relative 
  ; 
 
  } 
 
  .detailTopText 
  {
    
  color: 
  black 
  ; 
 
  position: 
  absolute 
  ; 
 
  } 
 
  .detailTopText1 
  {
    
  margin-left: 
  271 
  rpx 
  ; 
 
  margin-top: 
  72 
  rpx 
  ; 
 
  font-size: 
  84 
  rpx 
  ; 
 
  } 
 
  .detailTopText2 
  {