0
点赞
收藏
分享

微信扫一扫

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

程序员伟杰 03-13 12:30 阅读 2

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>

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;
}

3.实现效果

微信小程序文字上下无缝轮播的效果

举报

相关推荐

0 条评论