微信小程序—swiper实现文字纵向轮播提示

摘要

小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是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: "订阅号" }]
  }
})