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