微信小程序使用Swiper组件实现层叠轮播图_swiper-item 图片叠加显示

本篇代码照搬自网友，见链接。

搭建静态资源服务器

1. 全局安装serve：npm install -g serve
2. 在任何你想的地方新建文件夹：resources。resources下新建文件夹：images，用于存放静态图片资源；resources下新建文件夹：videos，用于存放视频文件；resources下新建文件夹：audios，用于存放音频文件。
3. 启动服务器：serve resources。

小程序项目

代码涉及的主要文件有：

1. index.wxml
2. index.wxss
3. index.js

index.wxml

<swiper previous-margin='200rpx' next-margin='200rpx' bindchange="swiperChange" style='height:{{swiperH}}'  circular>
  <swiper-item wx:for='{{imgList}}' wx:key='{{index}}'>
    <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
  </swiper-item>
</swiper>
1
2
3
4
5

index.wxss

.le-img {
  width: 100%;
  display: block;
  transform: scale(0.8);
  transition: all 0.3s ease;
  border-radius: 6px;
  box-shadow: 0 0 6rpx rgba(50, 50, 50, 0.4);
  -webkit-filter: blur(2rpx);
  -moz-filter: blur(2rpx);
  -ms-filter: blur(2rpx);
  -o-filter: blur(2rpx);
  filter: blur(2rpx);
}
.le-img.le-active {
  transform: scale(1);
  box-shadow: none;
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  -o-filter: blur(0);
  filter: blur(0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

index.js

Page({
  data: {
    swiperH:'',
    nowIdx:0,
    imgList:[
      'http://localhost:3000/images/j1.jpg',
      'http://localhost:3000/images/j2.jpg',
      'http://localhost:3000/images/j3.jpg',
      'http://localhost:3000/images/j4.jpg',
      'http://localhost:3000/images/j5.jpg',
      'http://localhost:3000/images/j3.jpg'
    ]
  },
  //获取swiper高度
  getHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth - 2*100;//获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;
    var sH = winWid * imgh / imgw + "px"
    this.setData({
      swiperH: sH
    })
  },
  //swiper滑动事件
  swiperChange:function(e){
    this.setData({
      nowIdx: 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

相关链接

微信小程序使用swiper组件实现层叠轮播图
轮播图的实现
微信小程序之实现层叠轮播图的效果案例