微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)
效果
代碼
布局樣式代碼省略，以下只展示邏輯代碼
<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)
推薦閱讀：微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
總結(jié)
到此這篇關(guān)于微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序scroll-view自動(dòng)居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript&DHTML基礎(chǔ)知識(shí)
首先請(qǐng)下載JScript.chm這本手冊(cè)，無(wú)論新手老手，有一本手冊(cè)是免不了的，特別是對(duì)于新手，如果你沒(méi)有空翻犀牛書(shū)，那么這本手冊(cè)將是你了解這門(mén)語(yǔ)言的首選。下面所講的大多數(shù)，手冊(cè)上可以沒(méi)有提及，或提及很少的內(nèi)容。2008-07-07
解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動(dòng)加載
這篇文章主要幫助大家解析javascript瀑布流原理，實(shí)現(xiàn)js圖片滾動(dòng)加載2016-03-03
JS中setTimeout的巧妙用法前端函數(shù)節(jié)流
這篇文章主要介紹了JS中setTimeout的巧妙用法前端函數(shù)節(jié)流 的相關(guān)資料,需要的朋友可以參考下2016-03-03
BootStrap 智能表單實(shí)戰(zhàn)系列(五) 表單依賴(lài)插件處理
這篇文章主要介紹了BootStrap 智能表單實(shí)戰(zhàn)系列(五) 表單依賴(lài)插件處理 的相關(guān)資料，比較簡(jiǎn)單，主要介紹生產(chǎn)表單元素后的一些后續(xù)處理操作，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-06-06
微信公眾號(hào)平臺(tái)接口開(kāi)發(fā) 菜單管理的實(shí)現(xiàn)
這篇文章主要介紹了微信公眾號(hào)平臺(tái)接口開(kāi)發(fā) 菜單管理的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JavaScript判斷一個(gè)URL鏈接是否有效的實(shí)現(xiàn)方法
如何用javascript來(lái)判斷請(qǐng)求的url/鏈接有效(可連接,可用)?需要的朋友可以參考下。2011-10-10
ie8 不支持new Date(2012-11-10)問(wèn)題的解決方法
使用JS的時(shí)候也碰到了如下問(wèn)題，后來(lái)經(jīng)過(guò)修改，在IE8環(huán)境里，下面的代碼是可用的，下面與大家分享下ie8 不支持new Date的解決方法，有類(lèi)似問(wèn)題的朋友可以參考下2013-07-07
JavaScript錯(cuò)誤處理try..catch...finally+涵蓋throw+TypeError+RangeEr
這篇文章主要介紹了JavaScript錯(cuò)誤處理:try..catch...finally+涵蓋throw+TypeError+RangeError,文章內(nèi)容具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2021-12-12
本篇文章主要介紹了Dropify.js圖片寬高自適應(yīng)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
JS產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
本文給大家分享js產(chǎn)生隨機(jī)數(shù)的用法小結(jié)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-12-12