Preview
2020-11-22-tower_swiper.gif
Algorithm
api
css
position, z-index, margin-left, transform, transition, opacity
js
throttle, debounce, wx.createSelectorQuery(通过 child 计算容器高度)
wxml/html
touchstart, touchmove, touchend
step by step
tower-swiper设置position: relativetower-swiper-item使用绝对布局position:absolute使其在parent中水平居中的位置tower-swiper-item通过transform:translateX()实现水平(同样可以使用margin-left,这里为了偏移量为自身宽度百分比，便使用了translateX)tower-swiper-item通过transform:scale()实现尺寸层次感tower-swiper-item通过z-index实现堆叠效果，中间至两端的元素，z-index递减tower-swiper-item通过transition实现过渡效果-
划重点: 通过
js计算z-index,left偏移量z-index 从中间往两端依次降低，left偏移量中间为0， 左端为负值，右端为正值
通过
touchstart,touchmove,touchend处理手势交互性能优化： 通过
throttle,debounce过滤一些不必要的高频事件
tower-swiper-item 整体样式
.tower-swiper-item {
position: absolute;
top: 0;
left: 50%;
transform: translateX(calc(-50% + var(--left) * 20%));
z-index: var(--z-index);
transition: all ease 0.5s;
}
.tower-swiper-item--hidden {
opacity: 0;
}
.tower-swiper-item__scale {
transform: scale(var(--scale));
transition: all ease 0.5s;
}
计算 z-index, left
const { items, active } = this.data;
const l = items.length;
const odd = l % 2;
const half = Math.floor(items.length / 2);
// eslint-disable-next-line no-plusplus
for (let i = 0; i < items.length; i++) {
const item = items[(half + active + i + odd) % l];
const zIndex = half - Math.abs(half - i) + odd;
item.setZIndex(zIndex);
item.setLeft(i - half);
item.setScale(1 - (half - zIndex) / 10);
}
通过设置 active 改变中间显示的 item
Usage
{
"usingComponents": {
"tower-swiper": "/lib/tower-swiper/index",
"tower-swiper-item": "/lib/tower-swiper-item/index"
}
}
<tower-swiper class="tower-swiper">
<tower-swiper-item wx:for="{{items}}" wx:key="id">
<image class="item" src="{{item.url}}" mode="aspectFill"></image>
</tower-swiper-item>
</tower-swiper>
Page({
data: {
items: [
{ id: 0, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg' },
{ id: 1, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg' },
{ id: 2, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg' },
{ 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' },
],
},
});
