微信小程序实现上下循环滚动的swiper弹幕条

1.实现效果

2.实现原理

2.1swiper：滑块视图容器。其中只可放置swiper-item组件。vertical 设置为true，滑动方向为纵向。

2.2当只有一条数据的时候，手动添加一个新的swiper-item,再一条数据的情况下，依旧循环滚动。

3.实现代码

<swiper class="new_swiper" vertical="true" autoplay="true" circular="true" interval="2000" duration="1500"
  display-multiple-items='1' easing-function="easeInOutCubic">
  <block wx:for-index="idx" wx:for='{{members}}' wx:key="index">
    <swiper-item>
      <view class="box_item">
        <text>{{item}} 嘻嘻嘻嘻嘻嘻嘻嘻休息</text>
      </view>
    </swiper-item>
    <!-- 当仅有一条数据的时候，添加一条数据 实现滚动 -->
    <swiper-item wx:if="{{members.length === 1}}">
      <view class="box_item">
        <text>{{item}} 嘻嘻嘻嘻嘻嘻嘻嘻休息</text>
      </view>
    </swiper-item>
  </block>
</swiper>

.new_swiper {
  width: 710rpx;
  position: absolute;
  height: 180rpx;
  top: -10rpx;
  z-index: 66;
  left: 40rpx;
}

.new_swiper swiper-view {
  vertical-align: bottom;
}

.box_item {
  display: inline-block;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 23rpx;
  box-sizing: border-box;
  padding: 0 16rpx 0;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.9);
  position: absolute;
  bottom: 0;
  line-height: 40rpx;
}

Page({
  data: {
    members:['苏苏就是小苏苏超级大奖']
  },

})

4.更多小程序demo，关注苏苏的码云。