分页传参uniapp
分页传参在uniapp中的实现方法
在uniapp中实现分页传参通常涉及页面跳转时传递参数以及接收参数。以下是几种常见的实现方式：
URL传参方式
通过uni.navigateTo或uni.redirectTo方法跳转时，在url后附加参数
uni.navigateTo({
url: '/pages/detail/detail?id=123&name=test'
})对象传参方式
使用uni.navigateTo的events属性传递复杂对象
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接收参数
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传参适合简单数据，有长度限制
- 对象传参适合复杂数据结构
- 全局变量需注意生命周期管理
- 参数名称避免使用特殊字符
