公告列表
公告列表
收藏
回答

swiper-item之间是否可支持设置间隔

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 微信iOS客户端 latest 2.8.0

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

swiper-item之间是否可支持设置间隔，滚动的间隙

最后一次编辑于  2021-09-29
回答关注问题邀请回答
收藏

7 个回答

  • githuo
    githuo
    2022-11-25

    将 next-margin配合swiper-item里的 margin-right一起使用就可以了.

     <swiper indicator-dots="{{indicatorDots}}"
    class="swiper-list" next-margin="-60rpx" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
     <block wx:for="{{background}}" wx:key="*this">
            <swiper-item>
             <view class="swiper-item" style="background-image: url({{item}});">
                            </view>
            </swiper-item>
                        
     </block>
                    
</swiper>

.swiper-item  {
    border-radius: 20rpx;
    height: 95%;
    overflow: hidden;
    background-size: 100% 100%;
    margin-right: 60rpx;
}

    2022-11-25
    有用 1
    回复
  • 八九
    八九
    2022-06-02

    next-margin="-20rpx" 完美解决您的需求

    2022-06-02
    有用 1
    回复
  • TNT
    TNT
    2021-09-29

    是这个效果吗？用previous-margin和next-margin实现

    https://developers.weixin.qq.com/community/develop/article/doc/000602f6c7c378127a097257b5b413

    2021-09-29
    有用 1
    回复 2
    • ltsok
      ltsok
      2021-09-29
      图片是全屏的，图片在滚动的过程中的间隔
      2021-09-29
      赞
      回复
    • TNT
      TNT
      2021-09-29回复ltsok
      应该是不支持的
      2021-09-29
      赞
      回复
  • 大林
    大林
    2022-01-01

    可以大致模仿一下，图片宽度设成97%，previouse-margin设为20rpx

    2022-01-01
    有用
    回复
  • 困难
    困难
    2021-09-29

    修改image标签大小可以吗？

    2021-09-29
    有用
    回复
  • showms
    showms
    2021-09-29

    可以，用previous-margin和next-margin

    2021-09-29
    有用
    回复 8
    • ltsok
      ltsok
      2021-09-29
      图片是全屏的，图片在滚动的过程中的间隔，有办法吗
      2021-09-29
      赞
      回复
    • showms
      showms
      2021-09-29回复ltsok
      看下你想实现的效果图？
      2021-09-29
      赞
      回复
    • ltsok
      ltsok
      2021-09-29
      2021-09-29
      赞
      回复
    • showms
      showms
      2021-09-29回复ltsok
      可以尝试一下用wxs绑定swiper滑动事件，滑动的时候再去修改两个swiper之间的间距，滑动结束后恢复间距
      2021-09-29
      赞
      回复
    • ltsok
      ltsok
      2021-09-29回复showms
      监听滚动事件的话，需要事件支持before和after；目前该事件只在滚动结束后才出发，所以还是不满足效果哈。。
      2021-09-29
      赞
      回复
    查看更多(3)
  • 天道酬勤
    天道酬勤
    发表于移动端
    2021-09-29
    想起来
    2021-09-29
    有用
    回复
请 登录 后发表内容
相关问题
相关文档