微信小程序如何实现顶部固定底部分页滚动，长尾词效果如何优化？

本文共计1308个文字，预计阅读时间需要6分钟。

目录+方案说明：+思路说明：+常见商品页面效果：+顶部banner+分类，下面商品列表。+方案说明：+方案1：整个页面滚动，滚动至某个位置fixed顶部box2，分页加载。+方案2：页面高度固定。

目录

• 方案说明：
• 思路说明：

常见商品页效果：顶部banner+分类，下面商品列表。

方案说明：

方案1：整个页面滚动，滚动至某个位置fixed图中“顶部box2”,分页页面触底加载

方案2：页面高度为屏幕高度，商品部分使用scroll-view，scroll-view初始高度为屏幕高度-顶部高度，只滚动scroll-view。

思路说明：

　　1 将整个页面分为上下两部分，整个页面高度100vh（原因1：scroll-view高度需要固定高度；原因2：出现两个滚动条）

　　2 页面上半部分包括banner(box1)以及固定的搜索及tab(box2)

　　3 根据顶部box的高度，算出下面scroll-view的高度（windowHieght - 200）

　　4 scroll-view滑动到 顶部box1+margin10的高度，将box1隐藏，box2动画移至顶部；下面scroll高度+滚动高度(或box1高度) + margin10高度（确保scroll的商品吸顶之后任然沾满屏幕）

方案3：使用插件

选择的是方案2，为什么不选择方案1，我们来剖析一下。

方案1适合页面交互比较简单，根据页面滚动高度隐藏展示即可。