微信小程序旋转木马/缩放轮播图效果
微信小程序旋转木马/缩放轮播图效果是一种什么样的效果,如何实现这一效果,下面为大家介绍这篇文章。
效果
文章涉及技术点
微信小程序原生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~
- //.wxml
- <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'>
- <block wx:for="{{imgUrls}}" wx:key="{{index}}">
- <swiper-item>
- <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
- </image>
- </swiper-item>
- </block>
- </swiper>
- //.wxss
- .swiperClass {
- margin: 0;
- margin-top: 10px;
- }
- .slide-image {
- width: 100%;
- height: 90%;
- border-radius: 10px;
- position: relative;
- }
- image.active {
- transform: none;
- transition: all 0.2s ease-in 0s;
- }
- image.quiet {
- transform: scale(0.8333333);
- transition: all 0.2s ease-in 0s;
- }
- //.js
- data: {
- imgUrls: [
- 'xxx',
- 'xxx',
- 'xxx',
- 'xxx'
- ],
- swiperIndex: 0 //这里不写第一次启动展示的时候会有问题
- },
- bindchange(e) {
- this.setData({
- swiperIndex: e.detail.current
- })
- },
上面Swiper控件里面还有设置宽高的属性就随便填几个数测试就好了,不影响主要功能。
Hishop小程序工具开发公司长沙海商,是一家有着十年技术前沿的公司,我们以先进技术提供并解决各行业小程序开发,操作简单,支持多种社群营销活动,以及可视化模板操作,大大减少人力物力成本。
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店