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

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>

.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. Call on the page:

<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 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!

Recommended reading:

JS reflection and dependency injection use case analysis

How to develop verification codes in WeChat mini programs Password input box function

The above is the detailed content of How to create a marquee effect in WeChat mini program (with code). For more information, please follow other related articles on the PHP Chinese website!