微信小程序中实现滚动视图点击项自动居中效果 - 行业资讯

　　介绍

这篇文章主要介绍微信小程序中实现滚动视图点击项自动居中效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

滚动视图|微信开放文档

效果

代码

布局样式代码省略,以下只展示逻辑代码

& lt; scroll-view scroll-x 左右滚动=皗{scrollLeft}}“, scroll-with-animation 类=皊croll-view"比; 　　,& lt; view 类=癱lass-item",天气:为=皗{班级名册}},,天气:关键=癷d", bindtap=皊witchClass"比; 　　& lt;才能text 类=皀ame"在{{item.className}} & lt;/text> 　　,& lt;/view> 　　& lt;/scroll-view> 　　onReady () { 　　,wx.createSelectorQuery () .select (& # 39; .scroll-view& # 39;) .boundingClientRect((矩形)=祝辞{ 　　时间=this.data.scrollViewWidth 才能;Math.round (rect.width) 　　,}).exec () 　　}, 　　switchClass () { 　　,let offsetLeft =e.currentTarget.offsetLeft 　　,this.setData ({ 　　scrollLeft才能:offsetLeft 作用;this.data.scrollViewWidth/2 　　,}) 　　}

我们想要的是居中的效果,所以触发滚动的条件是点<代码>滚动视图>

<代码> offsetLeft> 滚动视图>

以上是“微信小程序中实现滚动视图点击项自动居中效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!