效果图

(算是滑动右侧字母索引的进阶版吧)
上次写的小程序--滑动右侧字母索引,再来一次导流,哈哈哈😂
这次的话,多了滚动,滚动的话,右不影响滑动多选,机智的我选择了在右侧滑动,然后滑动的时候屏蔽滚动。
问题来了,怎么屏蔽滚动呢。
是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就行了, 因为我们就当作这没有滚动,只是屏幕在不断的变长~~
(听起来很魔幻)
--完--
二点半了,我要去睡觉了😪