微信小程序旋转木马/缩放轮播图效果

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

微信小程序旋转木马/缩放轮播图效果

效果

微信小程序旋转木马/缩放轮播图效果

 

文章涉及技术点

微信小程序原生Swiper控件
Wxss Transform、Transition
轮播条滚动回调控制
微信小程序条件渲染、列表渲染

全部实现代码加起来也就三四十行,大部分还用来写wxml UI代码,所以功能实现起来非常简单。 
首先将问题简单化,能用原生组件实现出我们想要的效果,绝不自己开发Component。原因:我懒+我自己写的也不敢说性能堪比原生组件

先来分析一波gif中我们需要实现效果和哪些效果可以直接修改原生Swiper的属性就能实现的

 

我们需要自己实现的功能

自动滚动+手动拖拽 (原生组件帮我们完成 Property:autoplay) 
面板指示点 (原生组件帮我们完成 Property:indicator-dots) 
左右可以露出非Active状态图的边缘(即Quiet状态, 后文class会以这两个名字定义) (原生组件帮我们完成 Property:previous-margin、next-margin) 
图片滚动到中心位置放大,滚动出去缩小 (我们手写实现,利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property:bindchange) 
这样看下来就很清晰了,需要我们实现的只有一个动画放大缩小。再进一步

就能分成两种实现方式:

wxss实现 
js实现

很显然wxss实现代码很少也能达到同样的效果,so~

 

  1. //.wxml
  2. <swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: {{swiperHeight}}px'>
  3. <block wx:for="{{imgUrls}}" wx:key="{{index}}">
  4. <swiper-item>
  5. <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
  6. </image>
  7. </swiper-item>
  8. </block>
  9. </swiper>
 

  1. //.wxss
  2. .swiperClass {
  3. margin: 0;
  4. margin-top: 10px;
  5. }
  6.  
  7. .slide-image {
  8. width: 100%;
  9. height: 90%;
  10. border-radius: 10px;
  11. position: relative;
  12. }
  13.  
  14. image.active {
  15. transform: none;
  16. transition: all 0.2s ease-in 0s;
  17. }
  18.  
  19. image.quiet {
  20. transform: scale(0.8333333);
  21. transition: all 0.2s ease-in 0s;
  22. }
 

  1. //.js
  2. data: {
  3. imgUrls: [
  4. 'xxx',
  5. 'xxx',
  6. 'xxx',
  7. 'xxx'
  8. ],
  9. swiperIndex: 0 //这里不写第一次启动展示的时候会有问题
  10. },
  11.  
  12. bindchange(e) {
  13. this.setData({
  14. swiperIndex: e.detail.current
  15. })
  16. },

上面Swiper控件里面还有设置宽高的属性就随便填几个数测试就好了,不影响主要功能。

小程序工具开发公司长沙,是一家有着十年技术前沿的公司,我们以先进技术提供并解决各行业小程序开发,操作简单,支持多种社群营销活动,以及可视化模板操作,大大减少人力物力成本。

小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
微信小程序 SaaS
上/下篇
  • 微信小程序开发前必不可少的三件事

  • 微信小程序使用相机组件如何实现

换一换相关推荐
精选内容
热点精选