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);
}
相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app