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 theprecautionsfor 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 usedThe bindchange event of the swiper componentis 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:

.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: