评论

纵向 slider

纵向slider wxs事件

因为官方的 slider 只有横向的,所以按照官方的slider写了个纵向的,用 wxs 处理的事件(出了这么久了,却没有怎么用过。。)。代码片段如下

https://developers.weixin.qq.com/s/qYLgcDmC7Air

没什么难点,本来想着几行就写完了。。意料之外的多了些代码。。主要有几点想吐槽的

  • wxs 里的getState是用来存公共临时变量的。为什么不直接在 wxs里定义一个变量呢?因为如果有多个组件的话,这些变量会共享。另外还要注意下面的情况
 var state = getState()
 state.value = 1 // 正确
 state = {value: 1} // 错误
  • 点击事件是加到线条上的,线条本身太窄了,加了padding扩大点。另外,头尾两个位置应该是用户最常用的点击,但是却不怎么好点到,甚至根本点不到,所以在两头各加了2个view来直接设置最大最小值。
  • 想点着圆点滑动的时候,偶尔会点到滚动条上,结果造成页面滑动,所以在最外面加了 touchmove 绑定了空方法。
  • 为什么这个组件需要有 show-value 的配置。。感觉特别鸡肋。。

早先发到群里的那一版不太好,没优化,而且value的设置忘了减去 min了。。哈哈哈。。抱歉。。

最后一次编辑于  2020-07-06  
点赞 18
收藏
评论

23 个评论

  • 莫要
    莫要
    2021-03-09

    666,请教下大佬这个步长怎么设置为0.1

    2021-03-09
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2021-03-10
      用的取模,不想改。。你可以把值乘以10,步进作为1
      2021-03-10
      回复
  • 1张妙妙纸
    1张妙妙纸
    2021-01-13

    请问用scroll-view包裹住之后为什么设置width就无效了?从紧凑的很多纵向条变成了只显示一个width:100%纵向条

    2021-01-13
    赞同
    回复 11
    查看更多(6)
  • Wpl
    Wpl
    2020-11-19

    厉害!

    2020-11-19
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2020-11-19
      ~~
      2020-11-19
      回复
  • 王大拿
    王大拿
    2020-09-11

    拿来主义(滑稽)

    2020-09-11
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2020-09-14
      来拿来拿
      2020-09-14
      回复
  •       
          
    2020-05-12

    我来偷组件了

    2020-05-12
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2020-05-12
      em....
      2020-05-12
      回复
  • 阿巴阿巴
    阿巴阿巴
    2020-03-07

    卢仙女,再给你带一个粉丝,有人需要你的纵向slider啦

    2020-03-07
    赞同
    回复
  • 칡길릭
    칡길릭
    2019-11-11

    上面的链接点击后怎么无法打开开发者工具呢,我手动打开也没啥用

    2019-11-11
    赞同
    回复 2
    • 卢霄霄
      卢霄霄
      2019-11-12
      是不是开发者工具版本太低了。。
      2019-11-12
      回复
    • 칡길릭
      칡길릭
      2019-11-13回复卢霄霄
      果然是,更新到最新版本就好了。
      2019-11-13
      回复
  • GinGou
    GinGou
    2019-08-15
    给你个大大大大的赞👏👏👏👏👏
    2019-08-15
    赞同
    回复
  • GinGou
    GinGou
    2019-08-15
    谢谢你!解决了我项目中的难题,
    2019-08-15
    赞同
    回复
  • GinGou
    GinGou
    2019-08-15
    谢谢你!解决了我项目中的难题,
    2019-08-15
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2019-08-16
      不客气昂~
      2019-08-16
      回复

正在加载...

登录 后发表内容