美文网首页微信小程序开发小程序
微信小程序 旋转木马/缩放轮播图 功能

微信小程序 旋转木马/缩放轮播图 功能

作者: ______Dx | 来源:发表于2018-07-19 16:39 被阅读80次
    话不多说先上图.gif

    文章涉及技术点

    全部实现代码加起来也就三四十行,大部分还用来写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控件里面还有设置宽高的属性就随便填几个数测试就好了,不影响主要功能。


    注意身体,小心秃顶😬

    相关文章

      网友评论

        本文标题:微信小程序 旋转木马/缩放轮播图 功能

        本文链接:https://www.haomeiwen.com/subject/kwazpftx.html