效果图 参考网易有道词典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
看js权威指南时看到了，虽然不怎么写
a = a.concat 这样的代码，但是写过 a = [...a, ...b] 这样的。哈哈。要改
