微信小程序轮播/缩放轮播效果

微信小程序轮播/缩放旋转木马效果是什么样的效果，如何实现这种效果，下面为大家介绍这篇文章。

效果

文章涉及技术点微信小程序原生Swiper控件Wxss Transform、Transition轮播条滚动回调控制微信小程序条件渲染、列表渲染

总实现代码总共增加了三十或四十行，其中大部分也用于编写wxml UI代码，因此该函数实现起来非常简单。首先，简化问题，使用本机组件来实现所需的效果，而不是自己开发组件。原因：我很懒惰+我不敢说性能与原生组件相当

首先，我们可以分析一波GIF的影响，以及可以通过原生Swiper的属性直接修改哪些效果。

我们需要自己实现的功能

自动滚动+手动拖动（本机组件帮助我们完成Property：autoplay）面板指示器（本机组件帮助我们完成Property：indicator-dots）可以暴露非活动状态图的边缘（即Quiet状态，后面的类将定义两个名称。（本机组件帮助我们完成属性：上一个边距，下一个边距）图像滚动到中心以放大和缩小（我们手写实现，使用在技术要点中提到的滚动回调+条件渲染。回滚调用Property：bindchange）非常清楚，我们只需要一个动画来放大和缩小。进一步

可以分为两个实现:

Wxss实现了js实现

显然，wxss实现代码很少能达到同样的效果，所以〜

//.wxml//.wxss.swiperClass {margin: 0; margin-top: 10px;}。slide-image {width: 100％; height: 90％; border-radius: 10px; position: relative;} image。有效{转换:无;转换:全部0.2s缓入0;} image.quiet {转换:比例（0.8333333）;转换:全部0.2s缓入0s;} //。jsdata: {imgUrls: ['xxx '，'xxx'，'xxx'，'xxx']，swiperIndex: 0 //第一次写入汇海时会出现问题}，bindchange（e）{this.setData（{swiperIndex: e.detail .current }）}，

上面的Swiper控件还具有设置宽度和高度的属性，只需填写几个数字并测试它，它不会影响主要功能。

Hvihi.com小程序工具开发公司沈阳汇海，是一家拥有十年技术前沿的公司。我们以先进的技术，简单的操作，支持各种社区营销活动，视觉模板操作，提供和解决各行业的小程序开发，大大减少人力物力。成本。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。