微信小程序：侧滑栏

实现类似qq侧滑栏

先上效果图

功能：触摸屏幕往右滑动弹出侧滑栏，实现同上效果

实现思路1（建议）

思路1：侧滑栏的层级比主页高，是盖在主页之上的。

1.判断是否显示侧滑栏

外层绑定触摸事件，获取触摸起始位置坐标(a)和过程的位置坐标(b)，if语句判断当 b - a 大于100的话则显示侧滑栏(showDialog=true)

单击阴影部分时(showDialog=false) 记得对子层阻止点击事件传播@click.stop

2.不显示侧滑栏时

将侧滑栏固定定位-100vw(定位在左侧满屏宽的位置)

3.显示侧滑栏时

动态class当显示侧滑栏时(showDialog为true时)，给定位的left从 left:-100vw 改为 left:0 。

给主页赋一个 margin-left:650rpx; (注意：此处的宽度应和前面的侧滑栏同等宽度)，并给主页一个阴影的效果(background: rgba(0, 0, 0, .3)😉

给左侧也就是侧滑栏(dialog)背景白色,合适的宽度，高度拉满。然后填充侧滑栏的功能

实现思路2

侧滑栏与主页在同一层级。所以页面的宽度应该是主页的宽（850rpx）加上侧滑栏(650rpx)的宽度。

使用v-if="showDialog"是否显示侧滑栏

1.判断是否显示侧滑栏

外层绑定触摸事件，获取触摸起始位置坐标(a)和过程的位置坐标(b)，if语句判断当 b - a 大于100的话则显示侧滑栏(showDialog=true)

单击阴影部分时(showDialog=false) 记得对子层阻止点击事件传播@click.stop

2.不显示侧滑栏时

即showDialog为false时不显示

3.显示侧滑栏时

动态class当显示侧滑栏时(showDialog为true时)，给主页一个阴影色(background: rgba(0, 0, 0, .3)😉。