微信小程序 页面传值(不一样的玩法)

举个例子:
单击新闻标题 传id 到新闻详情页面

页面A
单击后
页面B

页面A:新闻页面
页面B:新闻详情页面

页面A只需要将数据 存入data
js

// pages/testA/testA.js
Page({

  data: {
    id:''
  },

  click: function(){
    this.setData({id:1001});
    wx.navigateTo({ url: '/pages/testB/testB' })
  }
})

wxml

<!--pages/testA/testA.wxml-->
<button bindtap='click'>新闻标题</button>

页面B只需获取A页面路由即可
js

// pages/testB/testB.js
Page({
  data: {

  },
  onLoad: function (options) {
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面路由
    var prevPage = pages[pages.length - 2];  //上一个页面路由

    console.log(prevPage.data);
    this.setData({ text:prevPage.data.id})
  },
})

wxml

<!--pages/testB/testB.wxml-->
<text>新闻id为:{{text}}</text>

举个例子:
模拟购买飞机票
姓名,手机号,输入完毕后,单击选择座位,跳转到选择座位页面
选择完毕后,关闭当前页面,在不清空姓名,手机号的情况下 将座位更改

页面A:填写信息页面
页面B:选择座位页面

页面A
单击后 进入页面B
页面B
单击后 在不清空在不清空姓名,手机号的情况下 将A页面座位修改为A1
在这里插入图片描述

页面A
js

扫描二维码关注公众号,回复: 4514007 查看本文章
// pages/testA/testA.js
Page({

  data: {
    name:'张三',
    mobile:'15638383838',
    seat:''
  },

  click: function () {
    wx.navigateTo({ url: '/pages/testB/testB' })
  }
})

wxml

<!--pages/testA/testA.wxml-->
姓名:{{name}}
手机号:{{mobile}}
座位:{{seat}}
<button bindtap='click'>请选择座位</button>

页面B 获取A页面路由 修改data即可
js

// pages/testB/testB.js
Page({
  data: {

  },
  select: function(){
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面路由
    var prevPage = pages[pages.length - 2];  //上一个页面路由

    prevPage.setData({ seat: 'A1' })
    wx.navigateBack();
  }
})

wxml

<!--pages/testB/testB.wxml-->
<button bindtap='select'>选择A1</button>

猜你喜欢

转载自blog.csdn.net/qq_39816586/article/details/85006139
今日推荐