微信小程序swiper显示左右两边内容

代码语言：javascript复制

    <swiper class="swiper" next-margin="120rpx" previous-margin="120rpx" current="{{currentItemId}}"
        bindchange="swiperChange" autoplay indicator-dots indicator-active-color="#0C6D4A" circular>
        <block wx:for="{{expert_list}}" wx:for-item="item" wx:for-index="index" wx:key>
            <swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
                <view class='row'>
                    <view class="title">{{item.name}}</view>
                    <view class='col {{currentItemId == index ? "selected" : ""}}'>
                        <image src="{{item.img}}"> </image>
                    </view>
                </view>
            </swiper-item>
        </block>
    </swiper>

代码语言：javascript复制

.swiper {
    height: 1000rpx;
}

.row {
    width: 100%;
    height: 100%;
}

.title {
    font-size: 36rpx;
    text-align: center;
    margin: 20rpx 0;
}

.col {
    width: 480rpx;
    margin: 0 auto;
    height: 85%;
    transform: scale(0.9);
    border-radius: 10rpx;
}

.col image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.selected {
    transform: scale(1);
    box-shadow: 0px 0px 20rpx 5rpx #CCC;
}

代码语言：javascript复制

data: {
    currentItemId: 1,
    expert_list: [{
        name: '1',
        img: 'http://sucai.suoluomei.cn/sucai_zs/images/20190911093001-1.jpg',
      },
      {
        name: '2',
        img: 'http://sucai.suoluomei.cn/sucai_zs/images/20191021145909-bg.png',
      },
      {
        name:'3',
        img:'http://sucai.suoluomei.cn/sucai_zs/images/20190920100012-1.jpg'
      },
      {
        name:'4',
        img:'http://sucai.suoluomei.cn/sucai_zs/images/20190910114143-630685d20d6b26aee30f43d76c77f161.jpg'
      }
    ]
  },
  swiperChange: function (e) {
    var currentItemId = e.detail.currentItemId;
    this.setData({
      currentItemId: currentItemId
    })
  },

  clickChange: function (e) {
    var itemId = e.currentTarget.dataset.itemId;
    this.setData({
      currentItemId: itemId
    })
  },

微信小程序

0 人点赞