以下是代码
(home.wxss)
.home-swiper-box{
padding: 20rpx;
}
.home-swiper-box .swiper{
height: 300rpx;
}
.home-swiper-box .swiper .swiper-item .image{
height: 150rpx;
width: 345rpx;
}
(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后面的都还是原来没变的
感谢各位大佬的解答,问题已经解决,多谢,继续学习了
previous-margin和next-margin设置一样的值,也可以在图片外层给个view,再写居中就可以了
<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; }
text-align:center;
}
加上这段试下