当前位置:首页 > uni-app

分页传参uniapp

2026-03-05 16:09:06uni-app

分页传参在uniapp中的实现方法

在uniapp中实现分页传参通常涉及页面跳转时传递参数以及接收参数。以下是几种常见的实现方式:

URL传参方式 通过uni.navigateTouni.redirectTo方法跳转时,在url后附加参数

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

对象传参方式 使用uni.navigateTo的events属性传递复杂对象

分页传参uniapp

uni.navigateTo({
  url: '/pages/detail/detail',
  success: function(res) {
    res.eventChannel.emit('acceptData', {id: 123, name: 'test'})
  }
})

接收URL参数 在目标页面的onLoad生命周期中获取参数

onLoad(options) {
  console.log(options.id) // 输出123
  console.log(options.name) // 输出test
}

接收事件参数 在目标页面中通过eventChannel接收参数

分页传参uniapp

onLoad(options) {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('acceptData', function(data) {
    console.log(data.id) // 输出123
    console.log(data.name) // 输出test
  })
}

全局变量传参 使用vuex或globalData存储参数

// 存储
getApp().globalData.pageParams = {id: 123, name: 'test'}
// 获取
const params = getApp().globalData.pageParams

注意事项

  • URL传参适合简单数据,有长度限制
  • 对象传参适合复杂数据结构
  • 全局变量需注意生命周期管理
  • 参数名称避免使用特殊字符

标签: 分页uniapp
分享给朋友:

相关文章

vue 实现分页

vue 实现分页

分页实现方法 在Vue中实现分页功能,可以通过计算属性和方法结合来实现。以下是一个典型的分页实现方式: 模板部分 <template> <div> <ul…

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

uniapp实现标题栏渐变

uniapp实现标题栏渐变

实现标题栏渐变的方法 在UniApp中实现标题栏渐变效果,可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法: 方法一:使用原生导航栏渐变 通过修改pages.json中的…

uniapp 壁纸

uniapp 壁纸

使用 Uniapp 开发壁纸应用的方法 实现壁纸展示与切换功能 在 Uniapp 中,可通过 swiper 组件实现壁纸轮播展示。结合 image 组件加载本地或网络壁纸资源,动态绑定 src 属性实…

uniapp番号

uniapp番号

关于“uniapp番号”这一搜索词,可能存在理解偏差或表述不明确的情况。以下分方向提供相关信息: Uniapp框架简介 Uniapp是一个基于Vue.js的跨平台开发框架,支持编译到iOS、Andr…

uniapp广播

uniapp广播

全局事件通信 在UniApp中实现广播功能可通过全局事件机制完成,适用于跨页面或组件通信。使用uni.$emit、uni.$on、uni.$off等方法实现事件的触发、监听与移除。 发送广播(触发事…