Wechat widget swiper to realize the effect of text vertical rotation prompt

Time:2020-2-10

abstract

There is always a scrolling notice bar at the top of the applet. Generally, a single item will be implemented with a running lamp. However, in the face of multiple items, it needs to be implemented with a round robin. The round robin is naturally a swiper. After checking, it really has the attribute of vertical. Swiper is very useful.

Effect

在这里插入图片描述

experience

在这里插入图片描述

Code

wxml


<view>
 <swiper vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <swiper-item>
    <view>{{item.title}}</view>
   </swiper-item>
  </block>
 </swiper>
</view>

wxss

.swiper-view{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 border-radius: 5rpx;
 background: tomato
}

.swiper_container {
 height: 50rpx;
 width: 90%;
}

.swiper_item {
 height: 50rpx;
 width: 90%;
 font-size: 26rpx;
 white-space: nowrap;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 color: white
}

Page({
 data: {
  msgList: [
   {Title: "circle of friends"},
   {Title: "article"},
   {Title: "public"},
   {Title: "applet"},
   {Title: "music"},
   {Title: "expression"},
   {Title: "subscription number"}]
 }
})

summary

The above is the wechat widget swiper introduced by Xiaobian to you to realize the text vertical rotation prompt effect, hoping to help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Analysis of new data type instances of ES6 learning notes

An example of this paper describes the new data types of ES6 learning notes. To share with you for your reference, as follows: 1. Data deconstruction assignment 1. Deconstruction and assignment of arrays Basic usage: let [key1, key2…] = [value1, Value2…] Let [name, age, sex] = [‘xiaoming ‘, 24,’ male ‘]; console.log(name); console.log(age); console.log(sex); Note […]