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

官方文档：前往查看

可以直接套用官方的示例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>

ZSBT666普通

打赏 收藏 海报 链接