最近，需要有一个steps步骤组件，并非单纯的显示步骤展示，通过active之类的激活显示而已，而是对应的step需要有操作区域。

但是呢，想要有切换动画效果，又不想自己去写动画效果^_^。还有一个需求是，不能主动进入下一步，需要完成上一步之后，才能进入下一步。

能否在微信提供组件的基础上来实现呢？既然都在这里写了，答案是肯定有的，简单说一下思路(思考过程)。

最开始，想要使用的是微信组件扩展weui提供的tabs组件，然后是通过swiper组件，二者都有动画切换效果，第一点需求能够很好的满足。只是第二点，不能够主动进入下一步，也就是滑动切换视图。

所以，重点是禁止主动滑动。

看了下tabs组件，内部其实也是scroll-view+swiper组件实现而已，而且要去掉tabs头，还得隐藏处理，干脆直接用swiper组件就可以了。

看了两遍文档，swiper的确没有提供类似disable之类的属性，来禁止主动切换视图。只能自己动手，丰衣足食。

最先想到的是通过pointer-event阻止事件的方式，内层元素在通过pointer-event恢复需要的事件，但是这有个问题是如果里面有个按钮需要有点击事件，通过pointer-event事件恢复之后，如果滑动是在该按钮上操作的，也可以滑动视图了。

所以，还是必须得阻止touch事件才行。小程序提供的是catch*的方式阻止事件，所以只需要给内层的swiper-item添加catchtouch*事件即可。

但是这里需要注意下，需要使用catchtouchmove，不能使用catchtouchstart，因为内部还有点击操作，用catchtouchstart的话，会将点击事件也阻止了。

大概代码如下：

// wxml
<swiper>
  <swiper-item catchtouchmove="toPreventDefault">1</swiper-item>
  <swiper-item catchtouchmove="toPreventDefault">2</swiper-item>
  <swiper-item catchtouchmove="toPreventDefault">3</swiper-item>
</swiper>
// js
Page({
  toPreventDefault(){},// 空方法
})

其实，还有方式，就是直接改写touch事件(我本身之前有写过一个touch事件封装)，自己实现滑动。

扩展一下，给小伙伴留下点思考空间，如果还需要一个额外的需求：已经完成的视图步骤之间可以主动切换，只有未完成的视图才禁止主动切换，又如何处理？