先上效果图吧
代码解释
为什么会有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。
写文章好累,第一次写,也不知道从哪里开始写。看来多读书才是王道。
代码写得不好看,没有封装。源码地址