场景一:Swiper页面支持自定义动画
方案:
-
给Swiper组件设置.nextMargin(50).prevMargin(50)属性。
-
给Swiper组件添加onChange事件,设置当前this.currentIndex=index,当currentIndex为首页或者尾页时,设置上一张以及下一张图片的缩放值。
核心代码:.onChange((index) => { console.info('changeIndex' + index) this.currentIndex = index // 设置当前index缩放值为最大值 this.scaleArray[this.currentIndex] = MAX_SCALE; if (this.currentIndex == 0) { // 当前index=0时,设置上一张图片的缩放值 this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE } else // 当前index不为0时,设置上一张图片的缩放值 { this.scaleArray[this.currentIndex -1] = MIN_SCALE } if (this.currentIndex == this.scaleArray.length - 1) { // 当index为最后一张图片时&