原谅我是个绘图渣渣。。。
初始效果
大概就是这样的需求，白色背景里边有其他内容的全屏展示，点击蓝色部分或拖动绿色部分可以展示出下图黄色部分的数据列表。。。。数据展开后可通过点击蓝色部分或下滑返回上图初始效果
实现效果图
红色视图样式
1、首先设置数据布尔类型变量listOpen，点击蓝色区域时通过修改listOpen控制黄色视图展示与隐藏，以达到调整红色框的高低的目的
2、添加滑动效果
红色框添加滑动事件三件套
@touchstart.stop="touchStart"
@touchmove.stop="touchMove"
@touchend="touchEnd"
添加拖动事件响应
top那个div是蓝色区域的代码，添加滑动事件后会影响子组件的点击事件，所以在滑动事件上都添加了.stop
touchStart时，若数据未展示，则将数据展示出来，但黄色区域高度设为0。反之记录当前视图的展示高度
touchMove时需要区分是在上滑展开还是下滑收起（此时因为点击时也有可能会有轻微的移动，所以添加了50的误差值，这种程度的滑动不予响应，可删可调可去）
如果deltaY大于0则是上滑操作，上滑的幅度就是黄色区域展示出的高度，当黄色视图已经是最高则不响应
deltaY小于0为下滑操作，黄色区域的高度是展示出的高度减去下滑的的幅度，此时deltaY是负值，直接用原始高度加上幅度即可
touchEnd时，如果是下滑操作，则关闭数据的展示，黄色区域高度设为0，，，上滑操作则直接将黄色区域高度设为最高值
注：1000px是任意给的一个绝对比实际视图展示高度大的值，实际高度使用max-height控制
黄色区域数据列表样式
网友评论