您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序中實(shí)現(xiàn)scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
scroll-view | 微信開(kāi)放文檔
效果
代碼
布局樣式代碼省略,以下只展示邏輯代碼
<scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view"> <view class="class-item" wx:for="{{classList}}" wx:key="id" bindtap="switchClass"> <text class="name">{{item.className}}</text> </view> </scroll-view> onReady(){ wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect)=>{ this.data.scrollViewWidth = Math.round(rect.width) }).exec() }, switchClass(){ let offsetLeft = e.currentTarget.offsetLeft this.setData({ scrollLeft: offsetLeft - this.data.scrollViewWidth/2 }) }
我們想要的是居中的效果,所以觸發(fā)滾動(dòng)的條件是點(diǎn)scroll-view
寬度一半之后的項(xiàng)才開(kāi)始滾動(dòng),所以需要減去寬度的一半
offsetLeft
為相對(duì)于scroll-view
總長(zhǎng)度的X軸距離,只要相減計(jì)算后的數(shù)值為正數(shù),就可以證明上面的條件,觸發(fā)滾動(dòng)
以上是“微信小程序中實(shí)現(xiàn)scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。