uniapp实现点击A页面按钮,跳转到B页面的指定位置

一、需求:

uniapp实现点击A页面按钮,跳转到B页面的指定位置

二、实现方法

第一种方式:

必须必须要注意!

scroll-into-view 即使是测试也不可写死(组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到索引位置)

scroll-y="true"& 固定高度

A页面

c 复制代码
<button bindtap='clickBtn'>跳转</button>

clickBtn: function(){
    uni.navigateTo({
        url: '../b/b?viewId=view4' // 参数viewId=定位的位置id
    })
}

B.页面

c 复制代码
<scroll-view  scroll-into-view="{{toView}}" style='height:100%;' scroll-y="true" class="scr">
    <view id='view1' style='200px;'>
        <text>My is View1</text>
    </view>
 
    <view id='view2' style='200px;'>
        <text>My is View2</text>
    </view>
 
    <view id='view3' style='200px;'>
        <text>My is View3</text>
    </view>
 
    <view id='view4' style='200px;'>
        <text>My is View4</text>
    </view>
 
    <view id='view5' style='200px;'>
        <text>My is View5</text>
    </view>
</scroll-view>


Page({
  data: {
      toView:'' // 配置默认显示view
  },
  onLoad: function (options) {
    var id = options.viewId // 定位view的id
    this.setData({
        toView:'id'
    })
  }
})

第二种方式:

在A页面的按钮点击事件中,通过uni.navigateTo方法跳转到B页面,并通过URL参数传递分类信息。

// A页面按钮点击事件

c 复制代码
navigateToBPage(category) {
  uni.navigateTo({
    url: '/pages/BPage/BPage?category=' + category
  });
}

在B页面的onLoad生命周期中,通过this.$route.query获取URL参数,并根据参数值进行分类显示

// B页面的onLoad生命周期

c 复制代码
onLoad() {
  // 获取URL参数中的category值
  const category = this.$route.query.category;

  // 根据category值进行分类显示
  if (category === 'category1') {
    // 根据分类1显示内容
    this.showCategory1Content();
  } else if (category === 'category2') {
    // 根据分类2显示内容
    this.showCategory2Content();
  } else {
    // 默认处理...
    this.handleDefault();
  }
},
methods: {
  showCategory1Content() {
    // 根据分类1显示内容的逻辑
  },
  showCategory2Content() {
    // 根据分类2显示内容的逻辑
  },
  handleDefault() {
    // 默认处理的逻辑
  }
}

第三种方式:

可以使用uni.navigateTo方法跳转到B页面,并在B页面的onReady生命周期中使用uni.pageScrollTo方法滚动到指定的view位置

在A页面的按钮点击事件中:

c 复制代码
// A页面按钮点击事件
navigateToBPage() {
  uni.navigateTo({
    url: '/pages/BPage/BPage'
  });
}

在B页面的onReady生命周期中:

c 复制代码
// B页面的onReady生命周期
onReady() {
  // 使用setTimeout延迟执行,确保DOM渲染完成
  setTimeout(() => {
    // 获取目标view的选择器
    const selector = '#targetView';

    // 使用uni.pageScrollTo方法滚动到目标view位置
    uni.pageScrollTo({
      selector,
      duration: 300
    });
  }, 2000);
}
相关推荐
2501_9159090612 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184113 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者815 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle17 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_9159214317 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q19632884751 天前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~1 天前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_915106321 天前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_916007471 天前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007472 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone