微信小程序——实现上下轮播图效果

index.wxml:

<view class="broadcastbox">
  <swiper class="broadcastList" vertical="true" autoplay="true" circular="true" interval="3000">
    <block wx:for="{{wordToU}}" wx:key='item'>
      <swiper-item>
        <view class='broadcastListInde'>
          <view class="broadcastheadimgurl">
            <image class='broadcastbannerImg'
              src="https://sucai.suoluomei.cn/sucai_zs/images/20200509144507-broadcast%402x.png"></image>
          </view>
          <view class='broadcastheaderName'>
          {{item.name}}</view>
          <view>|　</view>
          <view class='broadcastContent'>{{item.word}}</view>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

index.js:

wordToU:[
  {name:'大月',word:'喜结良缘成夫妻，白头偕老情意长'},
  {name:'于宇',word:'祝你们永远相爱，携手共渡美丽人生！'},
  {name:'大微',word:'恩恩爱爱甜如蜜，平平淡淡长如水'},
  {name:'徐宁',word:'才子佳人美洋洋，珠联璧合福洋洋'},
  {name:'王珂',word:'一生一世两情相悦，三世尘缘四世同喜'},
  {name:'赵杰',word:'今朝已定百年好，愿祝新人共白首'}
]

index.wxss:

.broadcastbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50rpx;
  margin: 10rpx 20rpx;
  border-radius: 30rpx;
  background: #f5f5f5;
}

.broadcastList {
  width: 100%;
  height: 50rpx;
}

.broadcastListInde {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 50rpx;
}

.broadcastheadimgurl {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  margin-left: 26rpx;
}

.broadcastbannerImg {
  width: 100%;
  height: 100%;
}

.broadcastheaderName {
  color: #008c8c;
  margin: 0 20rpx;
  font-weight: 600;
}

.broadcastContent {
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 474rpx;
  white-space: nowrap;
  color:red;
}