微信小程序「Tower Swiper」组件, 小程序代码片段, github
写得不好的地方在评论区留言哦~

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: relative
tower-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' },
    ],
  },
});

References

weilanwl/ColorUI

License

MIT

Tower Swiper