微信小程序点击左侧分类导航，当前选中的项滚动到分类导航中间

最新推荐文章于 2024-08-30 15:38:00 发布

摆烂兔

最新推荐文章于 2024-08-30 15:38:00 发布

阅读量2.3k

点赞数 4

文章标签：小程序

本文链接：https://blog.csdn.net/qq_38337245/article/details/114372497

版权

博客介绍了如何在微信小程序中实现点击分类导航后，让当前选中的项自动滚动到屏幕中间。虽然存在微小瑕疵，如定位不完全精确，但提供了shopCar.wxml, shopCar.wxss, shopCar.js的代码示例，适合开发者根据自身设备和需求进行调整。" 59116336,5609434,Linux内核：内存、外存、文件系统与上下文关系解析,"['操作系统', '内存管理', '文件系统', 'Linux', '虚拟内存']

摘要由CSDN通过智能技术生成

先看效果图吧（点击标题5自动滚动到中间）：

我研究出最简单的做法，会有瑕疵，点击的项滚动到中间不是很正中间，原因是根据屏幕的高度定制滚动间隔个数，或者是每个分类项高度误差影响不是很完美，但是至少简单能用，自己调整就可以用了，上代码：

1. shopCar.wxml

<view class="container">
    <!--左侧分类导航 ：
        首先使用相对定位将导航固定在页面左边，如果有头部导航和底部导航的需要自己计算各个的高度再定位分类导航，
        假设我的头部导航headHeight为66px,底部导航footHeight为48px，进行如下定位后scroll-view的高度也固定好了
        scroll-y 纵向滚动，默认是true
        scroll-with-animation 是否添加滚动效果，默认是true
        scroll-into-view 需要滚动项的id名称（选中的项，id不能以数字开头）
     -->
    <scroll-view styl