微信小程序之侧边栏滑动实现（附完整源码）

目录

一、效果图

二、原理解析

三、源码

四、项目下载

五、同类文章推荐：

六、福利：视频资源分享

      

---

一、效果图

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

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

     

二、原理解析

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

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

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

三、源码

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

slide.wxml

<view class="page">
    <!-- 侧边栏内容 -->
    <view class="page-slidebar">
        <view class="page-content">
            <view class="wc">
                <text>首页</text>
            </view>
            <view class="wc">
                <text>导航一</text>
            </view>
            <view class="wc">
                <text>导航二</text>
            </view>
            <view