微信小程序之侧边栏滑动实现过程解析(附完整源码)

一、效果图 讲什么都不如直接上效果图好,所以我们先来看下实现效果如何。 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果。 二、原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部。 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面。 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的。 三、源码 由于实现过程的时,我对代码作了比较详细的注释,所有这里就不废话,直接上代码。 slide.wxml <vie