uni-app|uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动 css3|uni-app|scrollview|swiper|javas

uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动

先看效果图
- 思路
- 注意
- 布局代码
- 完整代码

先看效果图
思路 1、利用scroll-view的scroll-into-view属性：值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
2、利用swiper的current属性：当前所在滑块的 index
3、swiper的放大和缩小需要设置不同的动画
注意

1、scroll-view不支持flex，默认block； 2、scroll-view设置scroll-x="true"; width: 100%; white-space: nowrap; （这个属性很重要，能不能滑动都看这个属性） 3、子元素设置display: inline-block； 4、子元素内容宽度要超出scroll-view的宽。 5、swiper的previous-margin、next-margin设置在不同客户端呈现的效果不一致

布局代码