V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
DreamCMS
V2EX  ›  问与答

求一个 js 写法,弹出的选择器如何选中中间的 li(弹出有的滚动条,滚上滚下自动选中中间的 Li)

  •  
  •   DreamCMS · 2022-04-24 16:53:53 +08:00 · 734 次点击
    这是一个创建于 732 天前的主题,其中的信息可能已经有所发展或是发生改变。
    13 条回复    2022-04-24 22:54:37 +08:00
    DreamCMS
        1
    DreamCMS  
    OP
       2022-04-24 16:54:56 +08:00
    滚动上下的时候,自动选中中间的 LI ,给他 addclass class=this
    nitmali
        2
    nitmali  
       2022-04-24 16:58:59 +08:00
    没看懂
    pendulum
        3
    pendulum  
       2022-04-24 17:00:26 +08:00
    什么是“弹出有的滚动条”
    DreamCMS
        4
    DreamCMS  
    OP
       2022-04-24 17:01:09 +08:00
    @nitmali 选日期不是有类似的 pick 吗,滚动自动选中中间的值
    DreamCMS
        5
    DreamCMS  
    OP
       2022-04-24 17:02:07 +08:00
    @pendulum 就是跟日期的一直滚动选中中间的 pick
    nitmali
        6
    nitmali  
       2022-04-24 17:04:32 +08:00
    你说的不会是鼠标悬停效果吧
    marcong95
        7
    marcong95  
       2022-04-24 17:06:24 +08:00
    li 元素又不接受焦点,DateTimePicker 那种不都是自己实现的么,算好位置之后设置 CSS transform: translateY(xx); 这种感觉
    nitmali
        8
    nitmali  
       2022-04-24 17:08:07 +08:00
    我知道你说的什么了。

    固定弹出层高度和子项高度,监听滚动,计算滚动距离和修正滚动,可以计算出当前显示在中间的子项
    DreamCMS
        9
    DreamCMS  
    OP
       2022-04-24 17:20:35 +08:00
    @nitmali 哈哈哈,已经有意思了,获取可视高度,再计算中间坐标,再选择监听滚动条的位置计算得出中间的变化的坐标
    snoopyhai
        10
    snoopyhai  
       2022-04-24 17:22:27 +08:00   ❤️ 1
    https://vant-contrib.gitee.io/vant/v2/#/zh-CN/picker

    这玩意, 其中有个参数叫 default-index

    找找源码, 看看如何实现的.
    tyx1703
        11
    tyx1703  
       2022-04-24 18:45:50 +08:00   ❤️ 2
    抛砖引玉,实现了一个轻量版的: https://output.jsbin.com/begibifaza
    f0rger
        12
    f0rger  
       2022-04-24 19:47:04 +08:00 via iPhone   ❤️ 1
    能找到对应 li 然后 scrollIntoView 吗
    DreamCMS
        13
    DreamCMS  
    OP
       2022-04-24 22:54:37 +08:00
    @tyx1703 牛逼~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3564 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 80ms · UTC 11:03 · PVG 19:03 · LAX 04:03 · JFK 07:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.