「开发者笔记」关于better-scroll关闭useTrans

先说下使用场景，使用了黄老师的better-scroll来做picker组件，但是参数调整好后出现了一个观感问题

SDGIF_Rusult_1.gif

然后寻找问题时发现，如果关闭插件开启的useTransition，使用插件默认关闭的requestAnimationFrame函数来做动画的话，就不会出现这种弹跳的问题，但是此时新的问题又出现了。

首先是第一个问题，

按理说点击组件的某一处会使其直接滚动到焦点处，但是关闭了useTransition后，并不会这样，基本只会让第一项滚动到焦点处。如图 SDGIF_Rusult_2.gif

这个问题的解决方法

给你要滚动的那些元素css加上这个属性，这样就可以正确点击焦点某项。

li {
     pointer-events: auto!important; 
   }

接着是第二个问题

wheel自带的getSelectedIndex()并没有正确获取到index，而是要么返回一个0，或者返回NaN类型回来。选中的index是整个组件的核心，如果没这个参数后面的代码可以不用写了。

先放一段正在处理多列滚动的配置。框架是是React。自带的index没法用了，那么就只有靠自己计算一下了。

scrollEnd在滚动开始时和结束时都会触发，不知道为什么（我也有些迷惑）。滚动开始时可以查看当前的wheel，y属性是离顶部的距离，滚动开始时返回的值为NaN，应该排除掉。结束时则是正常带有y的参数，但是这个参数也不是正确的，它是你松开鼠标时离顶部的值，所以只能做一个每行高度的数组，用这个参数来做比对当前焦点聚焦的位置，方法如下代码。

    Array.from( wrapper.current.children).forEach((item, index) => {
        const wheel = new BScroll(item, {
            wheel: {
                selectedIndex: 0,
                wheelWrapperClass: 'wheel-scroll',
                wheelItemClass: 'wheel-item',
                wheelDisabledItemClass: 'wheel-disabled-item',
                rotate: 0,
            },       
            useTransition: false,   
            deceleration: 0.0042,
            swipeTime: 1100,
        })  
        
        wheel.on('scrollEnd', () => {
            //滚动完成之后获取当前选取的索引值
            if(!Number.isNaN(wheel.y)) {
                const currentIndex = getCurrentIndex(wheel)
                console.log(index, currentIndex)
            }
        })  
    })
    const getCurrentIndex = wheel => {
        let heightArr = Array.from(wheel.items).map((item, index) => index * wheel.itemHeight)
        let stopY =  Math.floor(Math.abs(wheel.y))
        if(heightArr.findIndex(item => item === stopY) === -1) {
            heightArr.push(stopY)
            heightArr.sort((a, b) => a - b)
            let currentIndex = heightArr.findIndex(item => item === stopY)
            if(currentIndex === 0) {
               return 1
            }else if(currentIndex === heightArr.length - 1) {
               return heightArr.length - 2
            }else {
                if(Math.abs(heightArr[currentIndex] - heightArr[currentIndex - 1]) < Math.abs(heightArr[currentIndex + 1] - heightArr[currentIndex])) {
                   return currentIndex - 1
                }else {
                   return currentIndex
                }
            }
        }else {
            return heightArr.findIndex(item => item === stopY)
        }
    }