How to create a marquee effect in WeChat mini program (with code)-Mini Program Development-php.cn

How to create a marquee effect in WeChat mini program (with code)

php中世界最好的语言

Release： 2018-06-01 09:22:39

Original

5025 people have browsed it

This time I will show you how to create a marquee effect in the WeChat mini program (with code). What are the precautions for creating the marquee effect in the WeChat mini program. The following is a practical case. Let’s take a look.

1: Function introduction and explanation

#The effect of the marquee (the title of the article is displayed in the marquee), and on the right There is a button to view the article. The button is bound to the ID of the current ticker information. After clicking the button, you will 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 is used to obtain the array subscript of the current information, which achieves the effect of dynamically changing the id value of the binding information of the view button;

If you still don’t understand anything, welcome to join (173683895) WeChat mini program development communication group.

2: Rendering:

##3: Complete source code

1. Encapsulate it 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:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!