微信小程序实现公告文字滚动

最新推荐文章于 2025-02-24 15:54:51 发布

原创

最新推荐文章于 2025-02-24 15:54:51 发布 · 3.4k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

该博客详细介绍了如何在微信小程序中使用Animation动画对象来实现公告文字的滚动效果，包括wxml、wxss和js代码的实现步骤。

微信小程序通过Animation动画对象实现文字滚动效果

1、效果图：

在这里插入图片描述

2、wxml代码

  <!-- 公告轮播效果 -->
  <view class='notice' wx:if="{
    
    {isOpen}}">
    <!-- 公告的喇叭图片 -->
    <view class="left" bindtap="goNoticesList">
 <image src="../../icons/suona.png" mode="aspectFit"></image>
 </view>
  
   <!-- 中间：公告内容 -->
   <view class='content-box'>
     <view class='content-text' animation="{
    
    {animationData}}" bindtransitionend='animationend'>
     <text id="text">{
  
  {text}}</text>
    </view>
    </view>

<!-- 右边：详情-->
 <view class="right" bindtap="goNotice">
  <text class="more">详情>></text>
 </view>
 <!-- 右边：关闭公告滚动-->
 <view class="close" bindtap="closeNotices">