微信小程序实现字幕上下滚动

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

转载最新推荐文章于 2024-03-12 14:47:22 发布 · 5k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_40081888/article/details/90581410?utm_medium=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPai2-3.n

文章标签：

#小程序

小程序专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种基于微信小程序实现的垂直轮播广告组件，通过使用swiper组件并设置其属性，实现了广告内容的自动垂直滚动播放效果。该组件利用JS和WXML代码，能够动态加载广告列表，并通过WXSS样式控制布局和展示效果。

效果图:
在这里插入图片描述

代码:
*.js

page({
	data:{
		adList:[{
      'url':'',
      'title':'刚刚预约了服务'
    },{
      'url':'',
      'title':'内容内容内容内容内容'
    }],
	}
})

*.wxml

  <swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000">
    <block wx:for="{{adList}}">
    <swiper-item>
      <view class="zimubox">
        <view class="swiper_item">{{item.title}}</view>
      </view>
    </swiper-item>
    </block>
</swiper>

*.wxss


.swiper_zi{
  height: 50rpx;
  width: 80vw;
  }
  .swiper_zi .zimubox{
    height:100%;
    width: 100%;
    display: flex;/*横向布局*/
  }
  .swiper_zi .zimubox .swiper_item {
  font-size: 26rpx;
  overflow: hidden;/*隐藏溢出*/
  text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
  white-space: nowrap;/*强制文字不换行*/
  color: #333;
  line-height: 50rpx;
  }