收藏
回答

swiper 内容无法居中?

swiper 内容无法居中?

//curInfo:0

<swiper class="swiper" current="{{curInfo}}" circular="true" previous-margin="184rpx" next-margin="184rpx"bindchange="changeSwiper">
  <swiper-item wx:for="{{3}}" wx:key="item" class="flex-center item_swiper">
    <view class="flex-center swiper_info">
      <text class="title_50 text_600">{{index}}</text>
    </view>
  </swiper-item>
</swiper>


.swiper {
width100vw;
height460rpx;
background-color#FDF0F7;
border-top10rpx solid #111111;
border-bottom10rpx solid #111111;
}

.item_swiper {
width100% !important;
height100% !important;
justify-content: center;
}

.swiper_info {
width380rpx !important;
height380rpx !important;
background-color#FEC82E;
border-radius100%;
justify-content: center;
}

.swiper_case {
width100%;
height100%;
}

回答关注问题邀请回答
收藏

1 个回答

  • Hlxuan.
    Hlxuan.
    2023-02-12

    补充这个

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    2023-02-12
    有用
    回复 5
    • Qiu (吉²)
      Qiu (吉²)
      2023-02-12
      还是不行。谢谢啦。
      2023-02-12
      回复
    • Hlxuan.
      Hlxuan.
      2023-02-12回复Qiu (吉²)
      我试了下你提供的代码,加上这个里面的内容是可以居中显示的。
      2023-02-12
      回复
    • Qiu (吉²)
      Qiu (吉²)
      2023-02-12
      我加上了,但还是不行,刚进入页面的时候是这样,稍微点一下滑块,就居中了,不点不行。
      2023-02-12
      回复
    • 千帆
      千帆
      2023-09-14回复Qiu (吉²)
      这个问题解决了么,
      2023-09-14
      回复
    • Qiu (吉²)
      Qiu (吉²)
      2023-09-15回复千帆
      我把swiper放的自定义弹窗组件的slot里就这样。我现在不用自定义组件了,直接页面写了弹窗就没有这个问题了。
      2023-09-15
      回复
登录 后发表内容