微信小程序实现跑马灯动画效果的示例

小编给大家分享一下微信小程序实现跑马灯动画效果的示例，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

一：功能介绍及讲解

实现的跑马灯（跑马灯里面显示文章的title）的效果，并在右侧有个查看文章的按钮，按钮绑定当前的跑马灯信息的id，点击按钮后根据id跳转到相应的文章详情页；

这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前信息的数组下标，实现了动态改变查看按钮绑定信息id值的效果；

二：完整源码

1.封装成一个组件：

<!-- //滚动 -->  <template name="roll">   <block>     <navigator url='../details/details2/detail2?artical_id={{newsId}}'>      <view class='chakan'>查看</view>     </navigator>    <view class='sx_lunbo page_row'>     <text class='red'>公告</text>     <swiper class='sx_swiper page_row' autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId='{{item.id}}' circular>      <swiper-item wx:for="{{news}}" wx:key="">       <view class='reds'>{{item.title}}       </view>      </swiper-item>     </swiper>    </view>   </block>  </template>

.sx_lunbo {   width: 100%;   height: 60rpx;   border-bottom: solid 1px #eee;  }  .chakan{   padding-left: 25rpx;   right: 20rpx;   clear: both;   position:absolute;    height: 40rpx;   margin-top: 10rpx;   color: #f63;   border:solid 1px #f63;   border-radius:5rpx;   padding: 0rpx 10rpx 0rpx 10rpx;   font-size: 28rpx  }  .sx_swiper {   width: 550rpx;   margin-top: 10rpx;  }  .sx_swiper swiper-item{    height: 40rpx   }  .reds {   overflow: hidden;   text-overflow: ellipsis;   white-space:nowrap;   width:500rpx;   font-size: 28rpx;   height: 40rpx;  }  .red {   font-size: 24rpx;   color: white;   width: 60rpx;   height: 40rpx;   line-height: 40rpx;   background: blue;   padding-left: 10rpx;   margin: 10rpx;   border-radius: 10rpx;  }

2.在页面调用：

<import src="../template/roll/roll.wxml" />  <template is="roll" data="{{news,newsId}}" />

@import "../template/roll/roll.wxss";

newsId: function (e) {   var that = this   var item = e.detail.current;   this.setData({    newsId:that.data.news[item].id   })  },

3.news的数据：

看完了这篇文章，相信你对微信小程序实现跑马灯动画效果的示例有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！