微信html5文字滚动效果,微信小程序利用swiper实现文字纵向轮播提示效果

摘要

小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。

效果

体验

代码

wxml

{{item.title}}

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: "朋友圈" },

{ title: "文章" },

{ title: "公共号" },

{ title: "小程序" },

{ title: "音乐" },

{ title: "表情" },

{ title: "订阅号" }]

}

})

总结

以上所述是小编给大家介绍的微信小程序swiper实现文字纵向轮播提示效果，希望对大家有所帮助！