微信小程序scroll-view点击项自动居中效果的实现
更新时间：2020年03月25日 09:25:01 作者：WahFung
这篇文章主要介绍了微信小程序scroll-view点击项自动居中效果的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
效果
代码
布局样式代码省略，以下只展示逻辑代码
<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轴距离，只要相减计算后的数值为正数，就可以证明上面的条件，触发滚动
推荐阅读：微信小程序 scroll-view实现锚点滑动的示例
总结
到此这篇关于微信小程序scroll-view点击项自动居中效果的实现的文章就介绍到这了,更多相关小程序scroll-view自动居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下面所讲的大多数，手册上可以没有提及，或提及很少的内容。2008-07-07
这篇文章主要帮助大家解析javascript瀑布流原理，实现js图片滚动加载2016-03-03
这篇文章主要介绍了JS中setTimeout的巧妙用法前端函数节流 的相关资料,需要的朋友可以参考下2016-03-03
BootStrap 智能表单实战系列(五) 表单依赖插件处理
这篇文章主要介绍了BootStrap 智能表单实战系列(五) 表单依赖插件处理 的相关资料，比较简单，主要介绍生产表单元素后的一些后续处理操作，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧2016-06-06
这篇文章主要介绍了微信公众号平台接口开发 菜单管理的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
如何用javascript来判断请求的url/链接有效(可连接,可用)?需要的朋友可以参考下。2011-10-10
ie8 不支持new Date(2012-11-10)问题的解决方法
使用JS的时候也碰到了如下问题，后来经过修改，在IE8环境里，下面的代码是可用的，下面与大家分享下ie8 不支持new Date的解决方法，有类似问题的朋友可以参考下2013-07-07
JavaScript错误处理try..catch...finally+涵盖throw+TypeError+RangeEr
这篇文章主要介绍了JavaScript错误处理:try..catch...finally+涵盖throw+TypeError+RangeError,文章内容具有一定的参考价值，需要的小伙伴可以参考一下，希望对你有所帮助2021-12-12
本篇文章主要介绍了Dropify.js图片宽高自适应的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本文给大家分享js产生随机数的用法小结，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-12-12
最新评论