【经验分享】使用swiper组件制作文字上下滚动播报效果-阿里云开发者社区

【经验分享】使用swiper组件制作文字上下滚动播报效果

2024-02-04 76

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【经验分享】使用swiper组件制作文字上下滚动播报效果

在某些业务场景里，需要使用某些用户的排名信息，进行轮播展示。

先放下效果图：

而以上效果有点问题是支付宝小程序swiper的无缝滚动效果是有缺陷的，不过暂时还能接受吧。

微信有个属性：display-multiple-items 同时显示的滑块数量。

支付宝这边是没有这个属性的，那么如果操作显示呢？

来实践一发，假如swiper的总高度为320，给swiper-item加个class，然后设置高度，那么swiper-item的高度为80，是否可以实现呢？

实践结果是肯定的，同时展示了四个可滑动的swiper-item，但是出现了其他问题，这个swiper一滑动就是滑动四个swiper-item，那我们的效果又没有实现。

<view class="container">
  <view class="swiper-box">
    <swiper indicator-dots="{{false}}" vertical circular autoplay interval="2000">
      <block a:for="{{20}}" a:key="*this">
        <swiper-item>
          <view class="content">帅比你好。</view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

最后如何操作呢？

给swiper-slides这个组件设置高度。是不是从没看到过这个组件。

.container {
  width: 100%;
  height: 100vh;
  background: #F6F7F8;
}
.swiper-box {
  width: 100%;
  background: #FFF;
  padding: 20rpx 0;
  box-sizing: border-box;
}
swiper {
  width: 100%;
  height: 300rpx !important;
}
swiper-item, swiper-slides {
  height: 80rpx !important;
}
.content {
  width: 100%;
  height: 80rpx;
  display: flex;
  line-height: 80rpx;
  border-bottom: 2rpx solid #F3F4F5;
  padding: 0 32rpx;
  box-sizing: border-box;
}