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);
}
相关推荐
FinelyYang14 小时前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
浩星14 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
IT 前端 张14 小时前
uni-app在安卓设备上获取 (WIFI 【和】以太网) ip 和 MAC
android·tcp/ip·uni-app
F2E_Zhangmo17 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
儿歌八万首17 小时前
UniApp 加载 Web 页面解决方案
javascript·vue.js·uni-app
2501_9159184117 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
半世浮生18 小时前
uniapp开发微信路由踩坑
前端·uni-app
2501_9159090620 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app