微信小程序侧边栏滑动实现原理是什么？

本文共计1407个文字，预计阅读时间需要6分钟。

一、效果展示想要直观了解效果如何，不必直接查看效果图，我们可以先来看看实际效果是如何实现的。

二、原理解析

1.先实现侧边栏

一、效果图

讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。

通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。

二、原理解析

1.先实现侧边栏的内容，让侧边栏的内容居左，然后将侧边栏的内容置于屏幕的最底部。

2.接着实现主页的内容，并且让主页的内容默认是覆盖在侧边栏的内容上面。

3.然后，实现手指滑动屏幕的时候，主页的内容，向左滑动一定的宽度，让侧边栏的内容显示出来，而滑动的效果是通过 css 的 transition 来实现的。

三、源码

由于实现过程的时，我对代码作了比较详细的注释，所有这里就不废话，直接上代码。