码迷,mamicode.com
首页 > 微信 > 详细

小程序旋转木马 轮播图

时间:2018-08-31 17:07:29      阅读:533      评论:0      收藏:0      [点我收藏+]

标签:需要   aspect   滚动   http   F12   ctf   file   swipe   for   

前言

看下效果吧

技术分享图片

 

分析

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

直接上代码吧,嘻嘻

wxml

//.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>

 

wxss

//.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: [
‘http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg‘,
      ‘http://f0.topitme.com/0/6a/6c/11800178627706c6a0o.jpg‘,
 ‘http://img17.3lian.com/d/file/201701/05/14d111f12c9fa2796c774ffef1bbfe14.jpg‘,
 ],
    swiperIndex: 0 ,//这里不写第一次启动展示的时候会有问题
    swiperHeight:300
 },
 
bindchange(e) {
 this.setData({
      swiperIndex: e.detail.current
 })

 

小程序旋转木马 轮播图

标签:需要   aspect   滚动   http   F12   ctf   file   swipe   for   

原文地址:https://www.cnblogs.com/yf-html/p/9566220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!