效果图:

代码:

*.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;
}
最后修改:2022 年 01 月 10 日
如果觉得我的文章对你有用,请随意赞赏