微信小程序scroll-view點擊項自動居中效果的實現(xiàn)
更新時間：2020年03月25日 09:25:01 作者：WahFung
這篇文章主要介紹了微信小程序scroll-view點擊項自動居中效果的實現(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ā)滾動的條件是點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)文章
javascript實現(xiàn)客戶端兼容各瀏覽器創(chuàng)建csv并下載的方法
這篇文章主要介紹了javascript實現(xiàn)客戶端兼容各瀏覽器創(chuàng)建csv并下載的方法,實例分析了javascript操作csv文件的技巧,需要的朋友可以參考下2015-03-03
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。這篇文章主要介紹了使用BootStrap進行輪播圖的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript編程學習技巧匯總，整理了編程技巧、實用函數(shù)、簡潔方法、編程細節(jié)等相關(guān)資料，感興趣的小伙伴們可以參考一下2016-02-02![有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系](http://img.jbzj.com/images/xgimg/bcimg3.png)
有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系
這篇文章主要介紹了有關(guān)JS中的0,null,undefined,[],{},'',false之間的關(guān)系,需要的朋友可以參考下2017-02-02
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)...2007-08-08
使兩個iframe的高度與內(nèi)容自適應,且相等...2006-11-11
在JavaScript中遭遇級聯(lián)表達式陷阱...2007-03-03
下面小編就為大家?guī)硪黄狝sp.Net之JS生成分頁條的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家介紹了如何利用JS實現(xiàn)一個小型編譯器，文中的示例代碼講解詳細，對我們學習或工作有一定的參考價值，需要的可以參考一下2022-04-04
微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付的相關(guān)資料,需要的朋友可以參考下2015-09-09