美文网首页
利用两个小程序自带slider组件实现doubleSlider

利用两个小程序自带slider组件实现doubleSlider

作者: Ultrame | 来源:发表于2018-02-05 17:48 被阅读0次

先上效果图吧

效果图

代码解释

为什么会有300和3000这两个特殊值,而不是400或其他数字?

因为我把两个slider的总宽度刚好设置成了屏幕宽度的80%。在这种情况下,最大值最小值之差在300以内,slider就能得到最大值和最小值之间的任何数字。如果两个slider总宽度大于80%,最大值和最小值之差也可以大于300。反之,则会小于300。

差在300之内的确定了,是不是差在300-3000之内的也和300之内的相似。

比如说最小值是20,最大值是2700。两者除以10,就变成 2-270了,操作的slider的范围也就是2-270。此时scale就为10。然后在wxml中将slider的值乘以scale就可以了

代码示例

这就是为什么最大值和最小值之差大于300时,需要输入的数字必须是整十数,slider的value值也是整十数。

当输入最大或最小值后,点击确定按钮,执行judgeNum函数。判断输入的数字是否合法,并设置一些参数scale 和 rate。

当dValue(最大最小值之差)在300之内,rate的值为 dValue / 100。当dValue在300-1000之内时,rate的值为dValue / 1000。

代码示例

动态改变两个slider的宽度

图示

比如说最小值为20,最大值为160,两者之差为140。当slider1的value为50,slider2的value为120的时候,此时如果移动左边那个slider(slider1),它能移动的最大宽度也就是 120-20的差和140的比。同理,如果移动右边的slider,它能移动的最大宽度就是160-50的差和140的比。在slider上catchtouchstart一个changeStart方法,来改变当前操作的slider 的宽度,使其能够滑动。

代码示例

在slider滑动式存储slider的value值

代码示例

Issue:

当两个slider都滑动到了最右端,此时slider1的宽度为100%,slider2的宽度为0,第二个slider覆盖在第一个slider之上,无法在操作slider。所以需要将slider2先隐藏,就能操作slider1了。然后在slider1滑动时,改变change的值为true,显示slider2。

代码示例

写文章好累,第一次写,也不知道从哪里开始写。看来多读书才是王道。

代码写得不好看,没有封装。源码地址

相关文章

网友评论

      本文标题:利用两个小程序自带slider组件实现doubleSlider

      本文链接:https://www.haomeiwen.com/subject/zrfizxtx.html