小程序 纵向轮播 显示3列 每次滚动一个效果

Posted 2020-12-14 时间在走，我们在追！

wxml

<view class="swiper-view">

 <swiper next-margin="100rpx"  previous-margin="100rpx" 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: 300rpx;

  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

 }

js

Page({
  data: {
     msgList: [
      { title: "朋友圈" },
      { title: "文章" },
      { title: "公共号" },
      { title: "小程序" },
      { title: "音乐" },
      { title: "表情" },
      { title: "订阅号" }
   ]
 }
})