1、效果图:
轮播图左向堆叠
2、封装的组件:
my-swiper.wxml
html
<view>
<view class="tower-swiper" bindtouchend="TowerEnd">
<view class="tower-item" wx:for="{{swiperList}}" wx:key="index" style="transform: scale(calc(0.4 + {{item.zIndex}} / 5));margin-left:calc({{item.mLeft}} * 22rpx); z-index: {{item.zIndex}};">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
</view>
</view>
</view>
</view>
my-swiper.json
html
{
"component": true,
"usingComponents": {}
}
my-swiper.wxss
css
.tower-swiper {
width: 50rpx;
position: relative;
}
.tower-swiper .tower-item {
position: absolute;
width: 50rpx;
height: 50rpx;
top: 0;
bottom: 0;
left: 50%;
margin: auto;
transition: all 0.2s ease-in 0s;
opacity: 1;
}
.tower-swiper .tower-item .none {
opacity: 0;
}
.swiper-item image {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
my-swiper.js
javascript
Component({
/**
* 组件的属性列表
*/
properties: {
swiperList: {
type: Array,
value: [
{
id: 0,
type: 'image',
url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/6dcecb85a997478d8aa27045195633c0.png'
},
{
id: 1,
type: 'image',
url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/5fc17d5232a84bdc9a43f72300a15ec1.png',
}, {
id: 2,
type: 'image',
url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/c236b580936a4af1a16d6e29ed8d2e1d.png'
},
// {
// id: 3,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
// },
// {
// id: 4,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
// },
// {
// id: 5,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
// },
// {
// id: 6,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
// }
]
},
towerStart: {
type: Number,
value: 0
}
},
/**
* 组件的初始数据
*/
data: {
timer: null,
towerStart: 0,
direction: 'right'
},
lifetimes: {
attached() {
this.TowerSwiper()
this.swiperOn()
},
detached() {
clearInterval(this.data.timer); // 清除定时器
}
},
/**
* 组件的方法列表
*/
methods: {
swiperOn() {
const _this = this
let timer = this.data.timer
if (!timer) {
timer = setInterval(() => {
_this.TowerEnd()
}, 2000)
this.setData({
timer
})
}
},
// 初始化towerSwiper
TowerSwiper() {
let list = this.data.swiperList;
for (let i = 0; i < list.length; i++) {
// 如果是list.length/2 :当前项的zIndex 的计算方式是:轮播图总数的一半加一,再减去当前项到中间项的距离(即绝对值的差) 这样,中间项的 zIndex 最大,其他项的 zIndex 随着距离中间项的远近逐渐减小。
//在这里我需要逐次向左变大,而不是中间大两遍小,所以我改成了list.length / 1
list[i].zIndex = parseInt(list.length / 1) + 1 - Math.abs(i - parseInt(list.length / 1))
list[i].mLeft = i - parseInt(list.length / 1)
}
this.setData({
swiperList: list
})
},
// towerSwiper计算滚动
TowerEnd() {
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 < this.data.swiperList.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
} 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({
direction,
swiperList: list
})
},
}
})
在父组件中使用:
javascript
{
"usingComponents": {
"mySwiper":"../component/my-swiper/my-swiper"
}
}
html
<mySwiper swiperList="{{activeAvatars}}"></mySwiper>
结束!!!