用better-scroll 模仿 app 横向滚动 tab 导航滚动效果

最新推荐文章于 2025-04-29 20:18:46 发布

90年的罐头�

最新推荐文章于 2025-04-29 20:18:46 发布

阅读量2k

点赞数 1

分类专栏：前端 js html

本文链接：https://blog.youkuaiyun.com/weixin_43978604/article/details/85178400

版权

本文记录了如何利用JavaScript和better-scroll库模仿App的横向滚动tab导航效果。通过初始化better-scroll滚动区域，监听点击事件获取当前索引，并根据横向坐标判断预滚动到下一个或上一个导航项。由于没有使用snap属性，而是手动实现了平滑滚动。文章附有实现效果的GIF图，但压缩后可能与实际效果略有差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录下 js 手写效果

思路

better-scroll 插件初始化滚动区

点击事件获取 index

判断相应横向 x 值预滚动 index+1 或 index -1 的 nav

由于 better-scroll 的snap（配置轮播效果）属性没使用过就直接手写了
效果图 ( gif 压缩了与实际流畅滚动有差)

html （需引入 better-scroll 初始化滚动节构）

			<div class="table-wrapper">
                                <div class="cells">
                                    <span class="table-cell active">table-cell1</span>
                                    <span class="table-cell">table-cell2</span>
                                    <span class="table-cell">table-cell3</span>