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_915921436 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_9159090610 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_9151063210 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159090610 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074710 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088916 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
iOS阿玮18 小时前
喜欢做马甲包的有福了~现在多了一招续费方式!
uni-app·app·apple
_AaronWong21 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
2501_915909061 天前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump