微信小程序swiper实现文字纵向轮播提示效果
时间：2021-02-27 14:29:58|栏目：JavaScript代码|点击： 次
摘要
小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。
效果
体验
代码
wxml
<view class="swiper-view">
<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
<block wx:for="{{msgList}}">
<swiper-item>
<view class="swiper_item">{{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: "朋友圈" },
{ title: "文章" },
{ title: "公共号" },
{ title: "小程序" },
{ title: "音乐" },
{ title: "表情" },
{ title: "订阅号" }]
}
})
总结
