微信小程序文字上下无缝轮播（滚动效果）

1.在wxml文件中添加如下代码

<swiper class="notices-text" autoplay interval="3000" vertical circular>
  <swiper-item class="notices-text-List" wx:for="{{notices}}" wx:key="index">
    <view class="content">{{item.name}}</view>
  </swiper-item>
</swiper>
1
2
3
4
5

2.在wxss文件中添加如下样式：

.notices-text  {
	height: 50rpx;
	width: 500rpx;
}

.notices-text-List {
 	text-align: left;
	line-height: 50rpx;
}

.content {
  	width: 500rpx;
	font-size: 28rpx;
	font-family: Source Han Sans CN, Source Han Sans CN-Regular;
	font-weight: 400;
	text-align: left;
	color: #222222;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.实现效果