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

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);
  }
});
相关推荐
WangHappy2 天前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端2 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker3 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker3 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
大米饭消灭者6 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround7 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround7 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌7 天前
小程序——布局示例
小程序
码云数智-大飞7 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序
luffy54597 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序