微信小程序点击自动滚动到指定元素位置

官方文档:前往查看

可以直接套用官方的示例js代码,将.xulgr修改成滚动目标的CSS值即可

scrollTo() {
	// 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
	wx.createSelectorQuery().select('.xulgr').boundingClientRect(res => {
	  // 到这里,我们可以从res中读到class为bb4的top,即离顶部的距离(px)
	  // 2使用wx.pageScrollTo()将页面滚动到对应位置
	  wx.pageScrollTo({
	    scrollTop: res.top, // 滚动到的位置(距离顶部 px)
	    duration: 0 //滚动所需时间 如果不需要滚动过渡动画,设为0(ms)
	  })
	}).exec()
}

wxml处只需要绑定scrollTo即可

<view bindtap="scrollTo">点击滚动到.xulgr的位置</view>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容