效果 代碼 佈局樣式代碼省略,以下只展示邏輯代碼 我們想要的是居中的效果,所以觸發滾動的條件是點 寬度一半之後的項才開始滾動,所以需要減去寬度的一半 為相對於 總長度的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
})
}
我們想要的是居中的效果,所以觸發滾動的條件是點scroll-view
寬度一半之後的項才開始滾動,所以需要減去寬度的一半
offsetLeft
為相對於scroll-view
總長度的X軸距離,只要相減計算後的數值為正數,就可以證明上面的條件,觸發滾動