微信小程序-实现文字滚动

最新推荐文章于 2024-03-12 14:47:22 发布

森海北屿 ღ

最新推荐文章于 2024-03-12 14:47:22 发布

阅读量430

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_42968609/article/details/118194887

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细介绍了如何使用微信小程序（WXML和WXSS）来创建一个垂直滚动的轮播组件，展示历史数据。组件具有自动播放、循环滚动、多项目同时显示的功能，数据绑定至`historyTodayData`，并展示了具体的样式设置和布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
.wxml

<view class="history_txt">
  <swiper class="tab_right" vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='4'>
      <view>
        <block wx:for='{{historyTodayData}}' wx:key="year">
          <swiper-item>
            <view class='content_item'>
              <text>{{item.title}}</text>
            </view>
          </swiper-item>
        </block>       
      </view>
  </swiper>
</view>

.wxss

.history_txt{
  width: calc(100% - 100px);
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}
.tab_right{
  padding: 16px 8px;
}

.content_item{
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color:#666666;
}