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

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

if时光重来

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

阅读量4.9k

点赞数 2

分类专栏：小程序文章标签：小程序

原文链接：https://blog.csdn.net/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 篇文章 1 订阅

订阅专栏

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

代码:
*.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;
  }