微信小程序实现堆叠式轮播

1. 微信小程序实现堆叠式轮播

  初始需要给item们放置好位置以及各种层级，然后在切换滑动的过程中对设置的位置、层级、透明度进行替换，加上小程序的wx.createAnimation()动画效果。

1.1. 方案一

1.1.1. banner.xml

<view class="swiper-page" bindtouchmove="touchmove" bindtouchstart="touchstart" bindtouchend="touchend">
  <view wx:for="{{imgArray}}" wx:key="index" class="swiper-container">
    <view class="item-container" style="z-index:{{indexArray[index]}}">
      <view class="item{{index}} item-common" animation="{{animation[index]}}" data-text="{{textArray[index]}}">
        <image class="background" src="{{item.image}}" mode='aspectFit'></image>
        <text class="item-text">{{item.text}}</text>
      </view>
    </view>
  </view>
  <view bindtap="tapLeft" style="position:absolute;top:0;left:20rpx">往左滑</view>
  <view bindtap="tapRight" style="position:absolute;top:0;right:20rpx">往右滑</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

1.1.2 banner.wxss

<view class="swiper-page" bindtouchmove="touchmove" bindtouchstart="touchstart" bindtouchend="touchend">
  <view wx:for="{{imgArray}}" wx:key="index" class="swiper-container">
    <view class="item-container" style="z-index:{{indexArray[index]}}">
      <view class="item{{index}} item-common" animation="{{animation[index]}}" data-text="{{textArray[index]}}">
        <image class="background" src="{{item.image}}" mode='aspectFit'></image>
        <text class="item-text">{{item.text}}</text>
      </view>
    </view>
  </view>
  <view bindtap="tapLeft" style="position:absolute;top:0;left:20rpx">往左滑</view>
  <view bindtap="tapRight" style="position:absolute;top:0;right:20rpx">往右滑</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

1.1.3 banner.js

// 位置列表
let posArray =    [ 280,120,420]
// 缩放列表
let scaArray = [1,  .8, .8 ]
// 透明度列表
let opaArray = [1,.8, .8]
// 高度列表
let indArray = [ 1, 0.8,  0.8]
// 当前位置列表
let curPosArray =   [ 280,120,420]
// 当前缩放列表
let curScaArray = []
// 当前透明度列表
let curOpaArray = []
// 当前高度列表
let curIndArray = []
let left = 0
 
 
// 是否可点击，控制点击频率
let canClick = true
 
// px和rpx转换比例，用于横向滑动的时候计算滑动距离（rpx）
let screenRate = 1
 
Page({
 
    data: {
        imgArray: [{
            image:'imgs/image1.png',
            text:'页面1'
        },{
            image:'imgs/image2.png',
            text:'页面2'
        },{
            image:'imgs/image3.png',
            text:'页面3'
        }],
        animation: [],
        indexArray: [2,1,1]
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        wx.getSystemInfo({
            success: (res) => {
                screenRate = 750 / res.screenWidth
            }
        })
        this.animation = []
        for (let i = 0; i < 3; i++) {
            let animation = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease-out',
            })
            this.animation.push(animation)
        }
    },
    touchstart(e) {
        left = e.touches[0].pageX
    },
 
    touchmove(e) {
        if (this.isMove) {
            return
        }
        let moveLength = (e.touches[0].pageX - left) * screenRate
        moveLength = moveLength > 60 ? 60 : moveLength
        moveLength = moveLength < -60 ? -60 : moveLength
        let rate = moveLength / 60
        if (rate == 1) { //从右往左滑
            this.isMove = true
            this.tapLeft()
        } else if (rate == -1) { //从左往右滑
            this.isMove = true
            this.tapRight()
        }
    },
 
    touchend(e) {
        setTimeout(()=>{
            this.isMove = false
        },500)
    },
 
    // 往左移
    tapLeft() {
        if (!canClick) {
            return
        }
        canClick = false
        setTimeout(() => {
            canClick = true
        }, 500)
        curPosArray = this.rollRight(posArray, 1)
        curScaArray = this.rollRight(scaArray, 1)
        curOpaArray = this.rollRight(opaArray, 1)
        curIndArray = this.rollRight(indArray, 1)
        let animation = this.data.animation
        for (let j = 0; j < 3; j++) {
            this.animation[j].scale(curScaArray[j], curScaArray[j]).left(curPosArray[j] + 'rpx').opacity(curOpaArray[j]).step()
            animation[j] = this.animation[j].export()
        }
        this.setData({
            animation: animation,
            indexArray: curIndArray
        })
    },
 
    tapRight() {
        if (!canClick) {
            return
        }
        canClick = false
        setTimeout(() => {
            canClick = true
        }, 500)
        curPosArray = this.rollLeft(posArray, 1)
        curScaArray = this.rollLeft(scaArray, 1)
        curOpaArray = this.rollLeft(opaArray, 1)
        curIndArray = this.rollLeft(indArray, 1)
        let animation = this.data.animation
        for (let j = 0; j < 3; j++) {
            this.animation[j].scale(curScaArray[j], curScaArray[j]).left(curPosArray[j] + 'rpx').opacity(curOpaArray[j]).step()
            animation[j] = this.animation[j].export()
        }
        this.setData({
            animation: animation,
            indexArray: curIndArray
        })
    },
 
    rollLeft: function(array, times) {
        for (let time = 0; time < times; time++) {
            let length = array.length - 1
            let temp = array[0]
            for (let i = 0; i < length; i++) {
                array[i] = array[i + 1]
            }
            array[length] = temp
        }
        return array.concat()
    },
 
    rollRight: function(array, times) {
        for (let time = 0; time < times; time++) {
            let length = array.length - 1
            let temp = array[length]
            for (let i = length; i > 0; i--) {
                array[i] = array[i - 1]
            }
            array[0] = temp
        }
        return array.concat()
    },
})
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

1.2. 方案二

1.2.1. banner.wxml

<view class="swiper-body" bindtouchmove="tauchMove" bindtouchstart="tauchStart" bindtouchend="tauchEnd">
 <view class=".swiper-item-box {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
   <view class="swiper-item">
     <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
     <view class="photo-item-layout">
       <view class="photo-item-title">标题</view>
       <view class="photo-item-label">标签 </view>
     </view>
   </view>
 </view>
</view>
1
2
3
4
5
6
7
8
9
10
11

1.2.3. banner.wxss

page {
 background-color: #fff;
}
.swiper-body {
 height: 420rpx;
 position: relative;
 max-width: 750rpx;
 overflow: hidden;
 box-sizing: border-box;
 margin-top: 90rpx;
}

.swiper-item-box {
 position: absolute;
 width: 300rpx;
 height: 380rpx;
 top: 0;
 bottom: 0;
 left: 50%;
 margin: auto;
 transition: all 0.2s ease-in 0s;
 opacity: 1;
 box-shadow: 0px 13rpx 12rpx rgba(0, 0, 0, .5);
 border-radius: 15rpx;
 overflow: hidden;
 transform: scale(calc(0.5 + var(--index) / 10));
 margin-left: calc(var(--left) * 100rpx - 150rpx);
 z-index: var(--index);
}

.swiper-item-box.none {
 opacity: 0;
}

.swiper-item {
 overflow: hidden;
 position: relative;
 width: 100%;
 height: 100%;
 border-radius: 6rpx;
}

.swiper-item image{
 width: 100%;
 display: block;
 height: 100%;
 margin: 0;
 pointer-events: none;
}

image {
 max-width: 100%;
 display: inline-block;
 position: relative;
 z-index: 0;
}



.photo-item-layout {
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 color: #fff;
 border-bottom-right-radius: 18rpx;
 float: left;
 display: flex;
 flex-direction: column;
 background: linear-gradient(180deg,  #0092fb00,#3691FB );
}

.photo-item-title {
 color: white;
 font-size: 32rpx;
 font-weight: 800;
 margin-top: 20rpx;
 text-align: center;
 overflow: hidden;
 text-overflow: -o-ellipsis-lastline;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
}

.photo-item-label {
 color: rgba(255, 255, 255, 0.829);
 font-size: 28rpx;
 text-align: center;
 padding: 3rpx 20rpx 10rpx 20rpx;
 border-top-right-radius: 20rpx;
 border-bottom-right-radius: 20rpx;
 overflow: hidden;
 text-overflow: -o-ellipsis-lastline;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
}
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

1.2.3. banner.js

Page({

 data: {
   swiperList: [
     {
       type: 'image',
       url: '/img_fj.png'
     }, {

       type: 'image',
       url: '/img_banner_random.png',
     }, {
       type: 'image',
       url: '/img_activity.png'
     }, {
       type: 'image',
       url: '/img_activity.png'
     },
     {
       type: 'image',
       url: '/img_stage.png'
     },
     {
       type: 'image',
       url: '/img_activity.png'
     },
   ],
 },


 onLoad: function (options) {
   this.tauchSwiper('swiperList');
 },


 onShow: function () {

 },
 // 初始化tauchSwiper
 tauchSwiper(name) {
   let list = this.data[name];
   for (let i = 0; i < list.length; i++) {
     // Math.abs(x) 函数返回指定数字 “x“ 的绝对值
     list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
     list[i].mLeft = i - parseInt(list.length / 2)
   }
   this.setData({
     swiperList: list
   })
 },
 // tauchSwiper触摸开始
 tauchStart(e) {
   this.setData({
     tauchStart: e.touches[0].pageX
   })
 },
 // tauchSwiper计算方向
 tauchMove(e) {
   this.setData({
     direction: e.touches[0].pageX - this.data.tauchStart > 0 ? 'right' : 'left'
   })
 },
 // tauchSwiper计算滚动
 tauchEnd(e) {
   let direction = this.data.direction;
   let list = this.data.swiperList;
   if (direction == 'right') {
     let mLeft = list[0].mLeft;
     let zIndex = list[0].zIndex;
     for (let i = 1; i < list.length; i++) {
       list[i - 1].mLeft = list[i].mLeft
       list[i - 1].zIndex = list[i].zIndex
     }
     list[list.length - 1].mLeft = mLeft;
     list[list.length - 1].zIndex = zIndex;
     this.setData({
       swiperList: list
     })
   } else {
     let mLeft = list[list.length - 1].mLeft;
     let zIndex = list[list.length - 1].zIndex;
     for (let i = list.length - 1; i > 0; i--) {
       list[i].mLeft = list[i - 1].mLeft
       list[i].zIndex = list[i - 1].zIndex
     }
     list[0].mLeft = mLeft;
     list[0].zIndex = zIndex;
     this.setData({
       swiperList: list
     })
   }
 }
})
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
82
83
84
85
86
87
88
89
90
91
92
93
94

1.3. 方案三

1.3.1. banner.wxml

<view class="pageLayout">
  <swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
    <block wx:for="{{bnrUrl}}" wx:for-index="index">
      <swiper-item id='{{index}}' bindtap='bannerClick' data-bannertitle='{{item.title}}' data-bannerid='{{item.id}}'>
        <image class='bannerLayout' src='{{item.url}}' mode='scaleToFill'></image>
      </swiper-item>
    </block>
  </swiper>
</view>
1
2
3
4
5
6
7
8
9

1.3.2. banner.wxss

/* 页面样式 */
.pageLayout {
      background-size: 100%;
      padding: 0 30rpx 50rpx;
}

/* 轮播图 */
.bannerLayout {
      width: 100%;
      height: 310rpx;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 20rpx;
      margin-top: 30rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 0 10rpx #7d7d7d;
      background: #fff;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.3.3. banner.js

// pages/banner2/banner2.js
const utils = require('../../utils/util.js');
Page({

      /**
       * 页面的初始数据
       */
      data: {
            "bnrUrl": [{
                  "url": `weChatFile/icon_menu_yxt.png`,
                  "title": `标题一`
            }, {
                  "url": `weChatFile/icon_menu_yxt.png`,
                  "title": `标题二 `
            }]
      },
      

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
            let that = this
            that.getslideImg()
      },
      bannerClick: function (e) {
            var bannerId = e.currentTarget.dataset.bannerid;
            wx.navigateTo({
                  //方法一
                  url: '../bannerDetail/bannerDetail?bannerId='+bannerId,
                  //方法二
                  //url: `../bannerDetail/bannerDetail?bannerId=${bannerId}`,
            })

      },
      getslideImg: function () {
            let that = this
            // utils.getPostData('a/msmallapp/appWheel/list', function (res) {
            //       let resData = res.data
            //       console.log("===3==" + resData);
            //       console.log(resData);
            //       if (resData) {
            //             if (resData.success) {
            //                   let resList = resData.body.list
            //                   that.setData({
            //                         bnrUrl: resList
            //                   })
            //             }
            //       }
            // })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {

      },

      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {

      },

      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {

      },

      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {

      },

      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {

      },

      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {

      },

      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {

      }
})
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

1.4. 方案四

1.4.1. banner.wxml

<!--index.wxml-->
<view class="container">
  <!-- 轮播图 -->
  <view class="banner-swiper">
    <swiper indicator-dots="{{indicator}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}"
      bindchange="swiperChange">
      <block wx:for="{{arr}}" wx:key="key">
        <swiper-item>
          <image src="{{item.images}}" class="slide-image {{index == swiperCurrent ? ' active' : ''}}"></image>
          <view class='goods-info'>{{item.title}}</view>
          <view class='goods-more'>
            <view>
              <text class='prefix'>免费样品</text>
              <text class='nums'>({{item.num}}个)</text>
            </view>
            <view>
              <text class='prefix supply'>供应价：</text>
              <text class='price'>￥{{item.price}}</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">
      <block wx:for="{{arr}}" wx:key="{{index}}">
        <view class="{{index== cur?'active':''}} dot"></view>
      </block>
    </view>
  </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
24
25
26
27
28
29
30
31

1.4.2. banner.wxss

/**index.wxss**/
/* 轮播图 */
.banner-swiper{
  width: 100%;
  height: 540rpx;
  overflow: hidden;
  position: relative;
  background-color: #fff;
} 

swiper {
  display: block;
  height: 540rpx;
  font-size: 0;
}

.slide-image{
  width: 96%;
  display: block;
  margin: 0 auto;
  height: 410rpx;
  border-radius: 10rpx;
  font-weight: bold;
} 

.goods-info{
  font-size: 28rpx;
  color: #000;
  text-align: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.goods-more {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.supply {
  margin-left: 40rpx;
}
.prefix {
  font-size: 24rpx;
  color: #000;
}

.nums {
  font-size: 24rpx;
  color: #666;
}

.price {
  font-size: 24rpx;
  color: #fc515c;
}
.dots{  
    position: absolute;
    right: 0;
    bottom: 140rpx;
    left: 0;
    width: 300rpx;
    height: 18rpx;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}  
/*未选中时的小圆点样式 */
.dot{ 
    width: 10rpx;
    height: 10rpx; 
    margin-right: 8rpx;
    border-radius: 100rpx;
    background-color: #f2f2f2;
}  
/*选中以后的小圆点样式  */
.active{
    width: 36rpx;
    height: 10rpx; 
    border-radius: 5rpx; 
    background-color: #f2f2f2;
}
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
82
83
84
85

1.4.3. banner.js

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [{
      images: '/weChatFile/img_fj.png',
      title: 'Lumea Prestige系列脱毛装置',
      num: '2',
      price: '99.00'
    },
    {
      images: '/weChatFile/img_banner_random.png',
      title: 'Lumea Prestige系列脱毛装置',
      num: '2',
      price: '99.00'
    },
    {
      images: '/weChatFile/img_activity.png',
      title: 'Lumea Prestige系列脱毛装置',
      num: '2',
      price: '99.00'
    }],
    beforeColor: "white",//指示点颜色 
    afterColor: "coral",//当前选中的指示点颜色 
    previousmargin: '24px',//前边距
    nextmargin: '24px',//后边距
    indicator: false, //是否显示指示点
    interval: 5000,  //自动切换时间间隔
    duration: 400,  //滑动动画时长
    autoplay: true, //是否自动切换
    circular: true, //是否采用衔接滑动
    cur: 0,         //当前所在滑块的index
  },

  //轮播图的切换事件  
  swiperChange(e) {
    let cur = e.detail.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
    this.setData({
      cur: cur
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104