内容吸附顶部位置不变

2018-07-24 本文已影响11人沐思雨

准备 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的位置。