美文网首页微信小程序
轮播图上添加不跟随滑动的标题

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

作者: 风规自远 | 来源:发表于2022-05-10 11:20 被阅读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;

}

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/uarlurtx.html