收藏
回答

swiper问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 swiper 客户端 6.3.7 2.2.5

swiper 组件. 我添加了组件的 previous-margin next-margin

可以改变前一张图片 跟后一张图片的样式吗? 或者是添加样式进去?

最后一次编辑于  02-18  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 卢霄霄
    卢霄霄
    02-18

    根据current和index来判断呗~

    02-18
    赞同
    回复 14
    • 天道酬勤
      天道酬勤
      02-18

      搞定

      02-18
      回复
    • 天道酬勤
      天道酬勤
      02-18回复天道酬勤

      上代码.

      02-18
      回复
    • 天道酬勤
      天道酬勤
      02-18回复天道酬勤

      xhtml---->>>


      <view class="body">

      <!--方案2-->

      <view class='list'>

      <swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange" >

      <block wx:for="{{imgItemNew}}"  wx:for-item="info"  wx:key="{{index}}">

      <swiper-item>

      <view class="index-image"  >

      <image src="{{info.url}}" class="slide-image {{swiperIndex == index ? 'active' : ''}} {{swiperIndex-1 == index ? 'active-previous' : ''}} {{swiperIndex+1 == index ? 'active-next' : ''}}" style='width: {{info.width}}; height: {{info.height}};' />


      </view>

      </swiper-item>

      </block>

      </swiper>

      </view>

      </view>


      02-18
      回复
    • 天道酬勤
      天道酬勤
      02-18

      ------> css



      .body {

      background-color: rgba(248, 248, 248, 0.137);

      height: 100%;

      width: 100%;

      }


      swiper {

      width: 750rpx;

      height: 952rpx;

      margin-top: 75rpx;

      }


      swiper-item {

      padding-top: 100rpx;

      }


      .index-image {

      width: 426rpx;

      height: 700rpx;

      display: flex;

      align-items: center;

      transform-style: preserve-3d;

      perspective: 180rpx;

      transition: transform 0.5s, -webkit-transform 0.5s;

      }


      .slide-image {

      border-width: 4px;

      border-style: groove;

      border-radius: 10rpx;

      padding: 2px;

      margin-left: 53rpx;

      }


      .active {

      transition: transform 0.5s, -webkit-transform 0.5s;

      transform:scale(1.25) rotateY(0deg);

      }


      .active-previous{

      transition: transform 0.5s, -webkit-transform 0.5s;

      transform:rotateY(-10deg);

      }


      .active-next{

      transition: transform 0.5s, -webkit-transform 0.5s;

      transform:rotateY(10deg);

      }



      02-18
      回复
    • 卢霄霄
      卢霄霄
      02-18回复天道酬勤

      完成了记得来分享哦~

      02-18
      回复
    查看更多(9)
  • 天道酬勤
    天道酬勤
    02-19

    老铁 又没有那种监听页面上拉 或者是下拉 的一个方法?

    02-19
    赞同
    回复