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({
    			
    		})
    	}
    }
    
  • 相关阅读:
    文本框改造之多选下拉控件
    多附件上传控件
    Linq to Sql:更新之属性遍历法
    如何在HTML5页面中启动本地的App? 下面的方法应该可以。
    Nodejs 学习笔记-相片整理Demo(二)
    Nodejs 学习笔记-相片整理Demo(一)
    前端学习笔记一:什么是W3C?
    网页嵌入调用 全国各城市天气代码
    html页面清除缓存
    判断鼠标动作,可以给鼠标在标签不同区域的动作分别写不同的效果
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15357592.html
Copyright © 2011-2022 走看看