评论

纵向 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 个评论

  • 阿巴阿巴
    阿巴阿巴
    2019-08-14

    顶起来。666 一大波粉丝来了

    2019-08-14
    赞同 4
    回复
  • Riom
    Riom
    2019-08-14

    666,路转粉

    2019-08-14
    赞同 2
    回复 9
    • 卢霄霄
      卢霄霄
      2019-08-14
      在线改bug。。
      2019-08-14
      回复
    • Riom
      Riom
      2019-08-19回复卢霄霄
      霄霄大佬,那个滑动的圆圈图标,可以自定义吗
      2019-08-19
      回复
    • 卢霄霄
      卢霄霄
      2019-08-19回复Riom
      你去代码里看啊。。我是用的个view。。你换成你想放的东西就行啦~ 图片也可以的呀。不影响事件
      2019-08-19
      1
      回复
    • Riom
      Riom
      2019-08-20回复卢霄霄
      好的,长官!
      2019-08-20
      回复
    • Riom
      Riom
      2019-08-21回复卢霄霄
      霄霄大佬,小程序可以调用用C语言写的方法吗
      2019-08-21
      回复
    查看更多(4)
  • 可爱的小男孩
    可爱的小男孩
    2021-10-26

    楼主大佬,请问怎么做出圆形的滑动块呢啊

    2021-10-26
    赞同 1
    回复 1
    • 卢霄霄
      卢霄霄
      2021-10-26
      没懂?你说的border-radius:50%?
      2021-10-26
      回复
  • fend
    fend
    2019-08-22

    楼主牛逼

    2019-08-22
    赞同 1
    回复
  • MJ682517
    MJ682517
    10-24

    博主

    这个手机竖屏的时候没问题

    横屏的时候就有问题了

    拖动圆圈总是比手势快

    手势刚到一般

    圆圈就已经到顶部了

    10-24
    赞同
    回复 6
    • 卢霄霄
      卢霄霄
      发表于小程序端
      10-25

      今天空了我看看吧

      10-25
      回复
    • 卢霄霄
      卢霄霄
      10-25
      我试了下 正常的呢,如果你用着有问题,可以提供一个可以复现问题的代码片段我帮你调试下
      10-25
      回复
    • MJ682517
      MJ682517
      10-25回复卢霄霄
      就是你的那个代码呀
      你把手机横屏就懂了
      就是说手按住的那个圆圈没有同步
      比如往顶部滑动
      圆圈总是先到达顶部
      一开始圆圈在滑轨的中间
      10-25
      回复
    • MJ682517
      MJ682517
      10-25回复卢霄霄
      横屏的时候
      手还没滑到顶部
      但是圆圈已经到顶部了
      并且值也是最大值了
      10-25
      回复
    • MJ682517
      MJ682517
      10-25回复卢霄霄
      这个页面编程横屏的时候就出现以上我说的问题
      要在手机上操作
      在开发工具中没有问题
      10-25
      回复
    查看更多(1)
  • MJ682517
    MJ682517
    10-24

    css单位能不能改成rpx

    10-24
    赞同
    回复
  • 花子君
    花子君
    2023-05-12

    请问大佬,怎么修改滑块的大小以及修改滑块颜色为渐变色啊???

    2023-05-12
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      发表于小程序端
      2023-05-12

      用调试器选中,看看是什么类,对应改就行啦

      2023-05-12
      回复
  • 配合度
    配合度
    2021-12-07

    怎么双向滑块啊


    2021-12-07
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      发表于小程序端
      2021-12-08

      有效果图吗

      2021-12-08
      回复
  • AMor
    AMor
    2021-08-06

    请问如何改成反向操作?最小值在上面,最大值在下面

    2021-08-06
    赞同
    回复 4
  • 橘๑`
    橘๑`
    2021-04-06

    请问,在ios上这个组件显示不全的原因是什么?没有滑条,只有一个圆圈,真机测试上 wx.createSelectorQuery().in(this).select('.slider-container').boundingClientRect这个调用res.height为0,要怎么解决呢?

    2021-04-06
    赞同
    回复 2
    • 卢霄霄
      卢霄霄
      2021-04-06
      应该是基础库变了啥,你先试试几个改动吧
      1、把 wx.createSelectorQuery().in(this) 改成 this.createSelectorQuery()
      2、试试把这段代码 setTimeout个1秒来执行
      2021-04-06
      回复
    • 卢霄霄
      卢霄霄
      2021-04-06
      你是直接跑我demo的时候 iOS res.height为0呢 还是你自己用的时候呀?
      2021-04-06
      回复

正在加载...

登录 后发表内容