小程序 - 实现右滑多选(可滚动)

869 阅读1分钟

效果图

(算是滑动右侧字母索引的进阶版吧)

上次写的小程序--滑动右侧字母索引,再来一次导流,哈哈哈😂

这次的话,多了滚动,滚动的话,右不影响滑动多选,机智的我选择了在右侧滑动,然后滑动的时候屏蔽滚动。

问题来了,怎么屏蔽滚动呢。

是preventDefault吗?

哈哈哈,拒绝冒泡就行了,在小程序里面,这样写

catch:touchmove="word_right_move"

相信你注意到了catch,而不是bind。

然后就是计算滑动滑动的到哪个位置了。

我先上图哈

看这个图看明白了吗。看不懂就往上翻,找到之前的文章看下。

然后我们拿到值,但是这时候没有滚动呢。滚动后就gg了。

于是,在y轴➕( 这个符号像不像微信里面不良信息一样,哈哈哈哈)滚动高度(top)

var scrollTop = this.data.scrollTop
    var y = e.touches[0].pageY + scrollTop;
    var itemLen = this.data.date_study_list.length
    var height = letterDomRes.height
    var top = letterDomRes.top
    // 滑动的偏移量(偏差值)
    var offsetTop = (height + top - y)
    var itemHeight = height / itemLen
    var index = itemLen - ((offsetTop / itemHeight)|0) - 1
    if(index < 0 || index >= itemLen){
      return
    }

变成这样,只改y就行了, 因为我们就当作这没有滚动,只是屏幕在不断的变长~~

(听起来很魔幻)

--完--

二点半了,我要去睡觉了😪