WeChat applet example: How to achieve the animation effect of the marquee (with code)-Mini Program Development-php.cn

WeChat applet example: How to achieve the animation effect of the marquee (with code)

不言

Release： 2018-08-10 15:20:46

Original

3636 people have browsed it

The content of this article is about the WeChat applet example: how to realize the animation effect of the marquee (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

1: Function introduction and explanation

The effect of the marquee (the title of the article is displayed in the marquee), and there is a button to view the article on the right side, the button is bound Determine the ID of the current ticker information. After clicking the button, jump to the corresponding article details page according to the ID;

The noteworthy point here is that I used the bindchange event of the swiper component to obtain the array of current information. Subscript, realizing the effect of dynamically changing the id value of the binding information of the view button;

2: Complete source code

1. Encapsulated into a component:

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

Copy after login

.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; 
}

Copy after login

2. Call on the page:

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

Copy after login

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

Copy after login

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

Copy after login

3.news data:

##Related recommendations:

WeChat Mini Program Example: Collection and unfavorite pictures and the functional effects of switching pictures

WeChat Mini Program Example: How to implement a sliding selector (with code )

The above is the detailed content of WeChat applet example: How to achieve the animation effect of the marquee (with code). For more information, please follow other related articles on the PHP Chinese website!