微信小程序页面滚动到指定位置

1.页面使用view排版,确定滚动某个距离

是否异步看自己需求

复制代码
setTimeout(() => {
      wx.pageScrollTo({
        scrollTop: 100,
        duration: 300
      });
    }, 500);

2.页面使用view排版,确定滚动某个节点处

在节点上进行标记id="review-record"

复制代码
 scrollToReviewRecord() {
    wx.nextTick(() => {
      wx.createSelectorQuery()
        .select('#review-record')
        .boundingClientRect()
        .exec((res) => {
          if (res[0]) {
            wx.pageScrollTo({
              scrollTop: res[0].top,
              duration: 300
            });
          }
        });
    });
  }

3.页面使用scroll-view排版,确定滚动某个距离

注意使用此排版上诉两个方法不可生效

复制代码
 <scroll-view
      scroll-y
      style="height: 100vh;"
      scroll-top="{{scrollTop}}"
      scroll-with-animation>
      <!-- 你的表单内容 -->
    </scroll-view>

Page({
  data: {
    scrollTop: 0
  },

  onReady() {
    setTimeout(() => {
      this.setData({ scrollTop: 100 }); // 滚动到100px
    }, 500);
  }
});
相关推荐
说私域5 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的社群团购线上平台搭建研究
人工智能·小程序·开源
Q_Q5110082855 小时前
python+springboot+uniapp微信小程序“美好食荐”系统 美食推荐 菜谱展示 用户互动 评论收藏系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
java_python源码6 小时前
springboot+vue考研复习小程序(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·小程序
2501_9159184111 小时前
HTTPS 请求抓包实战,从请求捕获到解密分析的逐步流程与工具组合(https 请求抓包、iOS 真机、SSL Pinning 排查)
android·ios·小程序·https·uni-app·iphone·ssl
千里码aicood12 小时前
springboot+vue兼职招聘小程序(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·小程序
2501_9159184112 小时前
Charles与Postman、JMeter结合使用教程:高效接口调试与性能测试方案
测试工具·jmeter·ios·小程序·uni-app·postman·webview
Nan_Shu_61416 小时前
学习:uniapp全栈微信小程序vue3后台 (24)
前端·学习·微信小程序·小程序·uni-app
2501_9159214317 小时前
iOS App 混淆与热更新兼容实战 混淆后如何安全可靠地推送热修复(Hotfix)与灰度回滚
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184118 小时前
iOS 26 软件兼容性大检查,哪些 App 出问题、API 变动要注意、旧功能不支持兼容性测试全流程
android·ios·小程序·https·uni-app·iphone·webview