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({
    			
    		})
    	}
    }
    
  • 相关阅读:
    SSM-最新pom.xml
    maven项目中找不到Maven Dependencies解决办法
    模拟实现MyBatis中通过SQL反射实体类对象功能
    Maven
    多台服务器下同步文件夹数据(rsync+inotify)
    启动tomcat时,一直卡在Deploying web application directory这块的解决方案
    阿里云服务器排查带宽流量过大的程序
    计算并列排名的算法
    Bootstrap基础篇—常见的CSS类
    别再看Promise 了,尝试下自己用JS 封装实现任务队列。
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15357592.html
Copyright © 2011-2022 走看看