收藏
回答

swiper里头的图片怎么居中,怎么显示完全?求大佬解答

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.03.2006090


以下是代码

(home.wxss)
.home-swiper-box{
  padding20rpx;
  
}
.home-swiper-box .swiper{
  height300rpx;
  
}
.home-swiper-box .swiper .swiper-item .image{
  height150rpx;
  width345rpx;
}



(home.wxml)
<view class="home-swiper-box">
  <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
          <image src="{{item}}" mode="widthFix" ></image>
            <!-- <view class="swiper-item {{item}}"></view> -->
          </swiper-item>
        </block>
      </swiper>
  </view>


(home.js)
data: {
    background: ['/icons/come.png''/icons/rel.png'],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    circular: true,
    duration: 500
  },
h后面的都还是原来没变的

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

3 个回答

  • 官方警告
    官方警告
    2020-07-31

    感谢各位大佬的解答,问题已经解决,多谢,继续学习了


    2020-07-31
    有用
    回复
  • 何以解忧
    何以解忧
    2020-07-31

    previous-margin和next-margin设置一样的值,也可以在图片外层给个view,再写居中就可以了

    2020-07-31
    有用
    回复
  • 游戏人生
    游戏人生
    2020-07-30
    <swiper-item>
    <view class="center">
             <image src="{{item}}" mode="widthFix" ></image>
    </view>
             </swiper-item>
    
    


    加个居中就行了

    .center {
    position: relative;
    width: 690rpx;
    height: 246rpx;
    z-index: 9;
    margin: 0 auto;
    overflow: hidden;
    }
    
    2020-07-30
    有用
    回复 4
    • 官方警告
      官方警告
      2020-07-31
      试过没用,盒子都是居中的,就是图片很奇怪,图片一旦居中就不能正常显示,正常显示就不居中
      2020-07-31
      回复
    • 游戏人生
      游戏人生
      2020-07-31回复官方警告
      这是我线上的代码。。。是居中的呀
      2020-07-31
      回复
    • 官方警告
      官方警告
      2020-07-31回复游戏人生
      我这边不知道为什么不行,然后我就换了一个课程里头的代码
      2020-07-31
      回复
    • 游戏人生
      游戏人生
      2020-07-31回复官方警告
      .home-swiper-box .swiper .swiper-item{
        text-align:center;
      }
      加上这段试下
      2020-07-31
      回复
登录 后发表内容
问题标签