一种变体swiper实现

效果图 参考网易有道词典ios

image.png

image.png

想要的效果基本就是这样
当前在第一个元素的时候，距离屏幕左边距离 x
当前在第二个元素的时候，距离屏幕右边距离 x
两个元素中间有一个距离 y

实现思路

1. 使相邻swiper-item之间没有距离

忽略元素距离屏幕两侧的距离
假定图片宽为 l
将swiper-item（轮播的直接子元素）范围定为 y/2 + l + y/2。这样的话，相邻swiper-item之间没有距离

2. 使屏幕展示一个半元素

假定 swiper-item的外层元素为swiper, swiper的外层元素为wrap
swiper 要溢出展示，这样屏幕上就会展示出一个半的元素

3. 左右切换时在屏幕的位置

如果不做调整，swiper左右切换时，会一直在一个固定位置
当时是做支付宝小程序时要实现的，所以用的是 swiper 组件 https://opendocs.alipay.com/mini/component/swiper

image.png

使用 onChange 回调在切换后，计算出一定的偏移量，使用 transform: translateX() 进行偏移

handleChange(e) {
      const current = e.detail.current;
      this.setData({ current });
 }

 <view
    class="fund-swiper-wrap"
    style="transform: translateX({{current === 0? 0: 88}}rpx)"
  >

其他

IMG_0792.JPG