首页 >> js开发 >> js微信小程序scroll-view点击项自动居中效果的实现js大全
js微信小程序scroll-view点击项自动居中效果的实现js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
scroll-view | 微信开放文档scroll-view | 微信开放文档效果代码布局样式代码省略,以下只展示逻辑代码
{{item.className}}
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
})
}
{{item.className}}
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宽度一半之后的项才开始滚动,所以需要减去宽度的一半scroll-viewoffsetLeft为相对于scroll-view总长度的X轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动offsetLeftscroll-view推荐阅读:微信小程序 scroll-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
})
}
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宽度一半之后的项才开始滚动,所以需要减去宽度的一半scroll-viewoffsetLeft为相对于scroll-view总长度的X轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动offsetLeftscroll-view推荐阅读:微信小程序 scroll-view实现锚点滑动的示例微信小程序 scroll-view实现锚点滑动的示例总结总结总结
相关文章:
- jsmpvue 项目初始化及实现授权登录的实现方法js大全
- jsvue通过过滤器实现数据格式化js大全
- jsvue cli4.0项目引入typescript的方法js大全
- jsvue 点击其他区域关闭自定义div操作js大全
- jswebpack+vue-cil 中proxyTable配置接口地址代理操作js大全
- js解决Echarts 显示隐藏后宽度高度变小的问题js大全
- JavaScript基于js实现判断浏览器类型代码实例
- jsvue中echarts图表大小适应窗口大小且不需要刷新案例js大全
- jsvue中移动端调取本地的复制的文本方式js大全
- js代码JavaScript中reduce()的5个基本用法示例