小程序scroll-view点击项自动居中
程序员文章站
2022-04-16 09:26:09
效果 代码 布局样式代码省略,以下只展示逻辑代码 我们想要的是居中的效果,所以触发滚动的条件是点 宽度一半之后的项才开始滚动,所以需要减去宽度的一半 为相对于 总长度的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轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动
上一篇: JavaScript AOP 使用