先說下使用場景，使用了黃老師的better-scroll來做picker組件惦积，但是參數(shù)調(diào)整好后出現(xiàn)了一個觀感問題

SDGIF_Rusult_1.gif

然后尋找問題時發(fā)現(xiàn)接校，如果關閉插件開啟的useTransition，使用插件默認關閉的requestAnimationFrame函數(shù)來做動畫的話狮崩，就不會出現(xiàn)這種彈跳的問題蛛勉，但是此時新的問題又出現(xiàn)了。

首先是第一個問題睦柴，

SDGIF_Rusult_2.gif

這個問題的解決方法

給你要滾動的那些元素css加上這個屬性，這樣就可以正確點擊焦點某項恬试。

li {
     pointer-events: auto!important; 
   }

接著是第二個問題

wheel自帶的getSelectedIndex()并沒有正確獲取到index窝趣，而是要么返回一個0疯暑，或者返回NaN類型回來训柴。選中的index是整個組件的核心，如果沒這個參數(shù)后面的代碼可以不用寫了妇拯。

先放一段正在處理多列滾動的配置幻馁。框架是是React越锈。自帶的index沒法用了仗嗦，那么就只有靠自己計算一下了。

scrollEnd在滾動開始時和結(jié)束時都會觸發(fā)甘凭，不知道為什么（我也有些迷惑）稀拐。滾動開始時可以查看當前的wheel，y屬性是離頂部的距離丹弱，滾動開始時返回的值為NaN德撬，應該排除掉。結(jié)束時則是正常帶有y的參數(shù)躲胳，但是這個參數(shù)也不是正確的蜓洪，它是你松開鼠標時離頂部的值，所以只能做一個每行高度的數(shù)組坯苹，用這個參數(shù)來做比對當前焦點聚焦的位置隆檀，方法如下代碼。

    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)
        }
    }