准备 prepare
首先，你要有一个很长很长的页面……在这里，我是仿照饿了么app做了一个长页面。
然后给这个页面做垂直拖动和拖动限制，不会坐的请移步之前的教程：两种方法打造手机垂直划屏
注：在这里，我是用的拖动动态面板的方法制作的划屏，而不是滚动条。
吸附 adsorb
明确需要吸附的内容，将要吸附的内容转化为动态面板。
例如我这里，我需要吸附的是搜索和排序2个内容。
吸附原理 页面往上拖出去了多少，就把需要吸附的内容移回来多少，这样它才能保持位置不变。
以下用到的局部变量说明：
1、page：元件 > 动态面板-内容页（很长的那个页面）
2、search：元件 > 动态面板-搜索
吸附方法
● 动态面板-搜索
它的Y坐标为45。所以在拖动页面时候，如果页面的y坐标小于-45，就应该将搜索移动到-page.y的位置。否则呢，就要把动态面板-搜索移回原来的位置(0,45)。
● 动态面板-排序
它的Y坐标为450。所以在拖动页面时候，如果页面的y坐标小于-450，就应该将搜索移动到-page.y的位置。否则呢，就要把动态面板-搜索移回原来的位置(0,450)。
但是！上面已经有一个搜索被吸附住了，所以我们应该让排序在搜索下面出现，所以应该在原基础上加上搜索的高度。也就是，如果页面的y坐标小于-450+search.height，就应该将搜索移动到-page.y+search.height的位置。
网友评论