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({
    			
    		})
    	}
    }
    
  • 相关阅读:
    CentOS7 彻底关闭 IPV6
    查看 nodejs 安装包的相关指令
    npm 查看全局安装过的包
    更换 nodejs npm 镜像为 淘宝 镜像
    更改 Centos 6 的 yum 源
    Nodejs 实现 WebSocket 太容易了吧!!
    解决国内 NPM 安装依赖速度慢问题
    详解 HTML5 中的 WebSocket 及实例代码-做弹幕
    JSmpeg-用JavaScript编写的视频播放器
    适用于Centos6.x系统的15项优化脚本
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15357592.html
Copyright © 2011-2022 走看看