Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
809 views
in Technique[技术] by (71.8m points)

如何更改当前展示的图片的宽度?

就是想让当前的展示的图片更宽一些 中间的空隙更小一些 这是网上找的代码 调了半天 都没法调宽度 直接调宽度 左右多出来的边会不一样宽 请问这个应该改哪里?

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动播放
    interval: 3000, //停留时间间隔
    duration: 1000, //播放时长
    previousMargin: '50px', //前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
    nextMargin: '50px', //后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
    circular: true, //是否采用衔接滑动
    currentSwiperIndex: 0, //swiper当前索引
  },
 
  swiperBindchange(e) {
    this.setData({
      currentSwiperIndex: e.detail.current
    })
  },
})
<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  previous-margin="{{previousMargin}}" 
  next-margin="{{nextMargin}}"
  circular="{{circular}}"
  bindchange="swiperBindchange"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/>
    </swiper-item>
  </block>
</swiper>
swiper{
  margin-top: 50rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}
 
.zoom-out {
  transform: scale(0.8);
  transition: all 0.7s ease-out 0s;
}
 
.zoom-in {
  transform: scale(1);
  transition: all 0.7s ease-in 0s;
}

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

swiper 有设置间隙的api spaceBetween


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...