微信小程序

轮播图上添加不跟随滑动的标题

2022-05-10  本文已影响0人  风规自远

<view class='swiper-container'>

  <swiper class='swiper' style="z-index: 100;" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular='true' duration="{{duration}}">

    <block wx:for="{{backgrounds}}" wx:key="unique">

      <swiper-item>

        <image class='swiper-item' src='{{item}}'></image>

      </swiper-item>

    </block>

  </swiper>

  <view class="title-css">

    <text style="color: white;font-size: 16px;font-weight:400;" >{{custname}}</text>

  </view>

</view>

.swiper-container {

  position: relative;

}

.swiper {

  height: 360rpx;

}

.swiper-container .swiper {

  height: 350rpx;

}

.swiper-item {

  width: 94%;

  margin-left: 3%;

  display: block;

  height: 100%;

}

.title-css {

  padding-left:30rpx;

  padding-bottom: 10rpx;

  position: absolute;

  bottom:0;

  left:0%;

  transform:translateX(0%);

  text-align:left;

}

上一篇下一篇

猜你喜欢

热点阅读