zoukankan      html  css  js  c++  java
  • uni-app页面回跳传参

    实现场景

    A页面跳转到B页面,然后把参数返回给A页面

    官方API

      uni.navigateTo({
      url: 'pages/test?id=1',
      events: {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
          console.log(data)
        },
        someEvent: function(data) {
          console.log(data)
        }
        ...
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
    
    // uni.navigateTo 目标页面 pages/test.vue
    onLoad: function(option) {
      console.log(option.query)
      // #ifdef APP-NVUE
      const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
      // #endif
      // #ifndef APP-NVUE
      const eventChannel = this.getOpenerEventChannel();
      // #endif
      eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
      eventChannel.emit('someEvent', {data: 'test'});
      // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
      eventChannel.on('acceptDataFromOpenerPage', function(data) {
        console.log(data)
      })
    }
    

    实例

    A页面

    <view @click="toAdd">跳转</view>
    
        methods: {
    	toAdd(){
    		uni.navigateTo({
    		url: '/index/index', //B页面路由
    		events: {
    			// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    			acceptDataFromOpenedPage: function(data) {
    			console.log(data,'acceptDataFromOpenedPage')
    		},
    		someEvent: function(data) {
    		console.log(data,'someEvent')
    		}
    	},
    	success: function(res) {
    		// 通过eventChannel向被打开页面传送数据
    		// res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
    		}
    	})
    ,
    

    B页面

    <view @click="toAddB(id)">跳转</view>
    
    methods: {
    	nav(id){
    		const eventChannel = this.getOpenerEventChannel();
    		console.log(eventChannel,'eventChannel ')
    		eventChannel.emit('acceptDataFromOpenedPage', {data: id});
    		eventChannel.emit('someEvent', {data: id});
    		uni.navigateBack({
    			
    		})
    	}
    }
    
  • 相关阅读:
    javaweb基础----省市县三级联动(javascript版)
    javaweb开发出错排查思路
    javaweb基础----使用原生fileupload上传文件时找不到上传的文件位置
    javaweb基础----Tomcat启动失败(Tomcat9)
    javaweb基础----Tomcat端口被占用
    命令行显示
    java开发环境
    java se ee me 区别
    解决win10 2503 2502 权限等问题
    浏览器只有ie可以登录
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15357592.html
Copyright © 2011-2022 走看看