微信小程序scroll-view滑动的时候滑动到指定位置（写定断点之后点击滚动到此位置，无需适配）

本文链接：https://blog.csdn.net/zerzhang/article/details/130265675

该代码示例展示了在微信小程序中如何处理scroll-view的点击事件和页面滚动事件，特别是如何利用wx.createSelectorQuery获取元素位置，并结合wx.getSystemInfo调整滚动至特定位置。同时包含了不同意和同意按钮的逻辑处理。

摘要由CSDN通过智能技术生成

<scroll-view scroll-y="true" 
style="white-space: pre-wrap; font-size: 28rpx;padding-top:20rpx;height: 80%;background-color: #F9F9F9;"  
scroll-with-animation  scroll-top="{{scrolltop}}">


<text style="color: #FF0505;" class="b318">
3.1.8.债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷。
</text>


</scroll-view>

 <view style="display: flex;margin-top: 20rpx;">
    <button  bindtap="nookfine">不同意</button>
    <button  bindtap="okfine">同意</button>
 </view>

data:{
scrolltop:0,
oneclick:true,
},


nookfine(){
        this.setData({showAgreement:false})
    },


okfine(){
        if(this.data.oneclick){
          this.scrollTo()
          this.setData({oneclick:false})
        }else{
           this.login()
           this.setData({showAgreement:false})
        }
    },

 scrollTo() {
      // 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
      wx.createSelectorQuery().select('.b318').boundingClientRect(res => {
             // 2.使用wx.getSysTemInfo()获取设备及页面高度windowHeight（px）
               var num = 0;
                wx.getSystemInfo({
                    success(ress) {
                      wx.pageScrollTo({
                        // 3. 滚动的距离根据设备的页面高度进行微调（px）
                        scrollTop: res.top - ress.windowHeight/2 + 50,
                        duration: 200
                      })
                      num = res.top - ress.windowHeight/2 + 50
                    } 
              })
              this.setData({scrolltop:num})
            }).exec()
    },

这个是点击事件，还有一个是进入页面滑动事件

微信小程序scroll-view滑动的时候滑动到指定位置_scroll-view滚动到指定位置_icoo张某人的博客-CSDN博客