摘要
微信小程序轮播图官方提供的swiper组件已经可以满足大部分轮播图效果,如间距轮播、顶层轮播,可仍有一些像3D翻转、旋转木马等效果需要通过监听滑动动作、利用动画去自定义实现,现就此四种效果提供解决方案及代码参考。
效果图
体验
体验路径:自定义系列>轮播图
代码
3D翻转轮播图与旋转木马轮播图代码
资源文件中包含封装的组件及使用demo,3d组件支持横向、竖向以及任意方向旋转。重要的事情说三遍:
源码免积分下载点击下载
源码免积分下载点击下载
源码免积分下载点击下载
间距轮播图与顶层轮播图代码
js部分
Page({
data: {
currentIndex: 0,
currentIndex1: 0,
currentIndex2: 0,
imgList: [{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000059.jpg"
},
{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000064h.jpg"
},
{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/07300256.jpg"
}
],
imgList1: [{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15511818.jpg"
},
{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000063h.jpg"
},
{
img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15510230.jpg"
}
],
},
changeSwiper: function (e) {
this.setData({
currentIndex: e.detail.current
})
},
changeSwiper1: function (e) {
this.setData({
currentIndex1: e.detail.current
})
},
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
wxml部分
<view class='container'>
<view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">原生swiper实现</view>
<scroll-view style="display:flex;width:100%" scroll-y>
<view class="container">
<view style="font-size:32rpx;color:#aaa">间距轮播图</view>
<swiper style="width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper" previous-margin="90rpx" next-margin="90rpx">
<block wx:for="{{imgList}}" wx:key>
<swiper-item class="swiperItem">
<image mode="aspectFill" src='{{item.img}}' class="imageItem {{currentIndex == index ? 'active': ''}}"> </image>
</swiper-item>
</block>
</swiper>
<view style="font-size:32rpx;color:#aaa;margin-top:50rpx">顶层轮播图</view>
<swiper style="display: flex;flex-direction: column;justify-content: center;align-items: center;overflow:unset;width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper1" previous-margin="150rpx" next-margin="150rpx">
<block wx:for="{{imgList1}}" wx:key>
<swiper-item class=" {{currentIndex1 == index ? 'swiperItemActive1': 'swiperItem1'}}">
<image mode="aspectFill" src='{{item.img}}' class="imageItem1 {{currentIndex1 == index ? 'active1': ''}}"> </image>
</swiper-item>
</block>
</swiper>
</view>
</scroll-view>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
wxss部分
page {
background: #f6f6f6;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.swiperItem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: unset;
}
.imageItem {
height: 300rpx;
width: 510rpx;
border-radius: 10rpx;
margin: 30rpx 0rpx;
z-index: 1;
}
.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
z-index: 2;
}
.swiperItem1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: unset;
z-index: 0.5;
}
.swiperItemActive1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: unset;
z-index: 1;
}
.imageItem1 {
height: 300rpx;
width: 510rpx;
border-radius: 10rpx;
margin: 30rpx 0rpx;
/* opacity: 0.5; */
}
.active1 {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
/* opacity: 1; */
}
.box {
width: 200rpx;
height: 300rpx;
margin: 50px auto;
border-radius: 10rpx;
perspective: 200;
-webkit-perspective: 200;
transform-style: preserve-3d;
}
.elem {
width: 100%;
height: 100%;
transform: rotateY(30deg);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
程序员不易,鼓励一下 !
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like tool-clicked"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">1</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/WeiHan_Seven">
<img src="https://profile.csdnimg.cn/8/2/5/3_weihan_seven" class="avatar_pic" username="WeiHan_Seven">
<img src="https://g.csdnimg.cn/static/user-reg-year/1x/4.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/WeiHan_Seven" data-report-click="{"mod":"popu_379"}" target="_blank">吖吖PaperPen</a></span>
</div>
<div class="text"><span>发布了22 篇原创文章</span> · <span>获赞 24</span> · <span>访问量 1714</span></div>
</div>
<div class="right-message">
<a href="https://im.csdn.net/im/main.html?userName=WeiHan_Seven" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
</a>
<a class="btn btn-sm attented bt-button personal-watch" data-report-click="{"mod":"popu_379"}">已关注</a>
</div>
</div>
</div>
</article>