先看一下本周的部分的设计图
页面设计并不太复杂,主要是
产品类型
那块点击的样式,其余的都不太复杂,没啥好说的。
这次主要是想记录一下不同页面下的传值
你看,在这个出发城市
和目的地城市
这两个搜索框点击了之后都跳转了页面,这也就意味着我们在这个工程项目里要新建两个文件夹。拿出发城市
为例,原页面名字叫productList.wxml
,点击了出发城市的搜索框之后跳转到出发城市的页面,名字叫departureCity.wxml
。这是两个不同的文件夹的页面,这也意味着有两个js文件,那他们之间怎么传数据呢?我们需要把用户输入的城市名字
传到前一个页面呀。
第一种方法:缓存
- 拿到用户的输入值,然后用
wx.setStorageSync
把值缓存下来 - 回到上一个页面,用
wx.getStorageSync
这个方法来拿到你需要的数据。
缓存真的是万金油,但是不推荐,显得笨重。肯定有更好的方法
第二种方法:getCurrentPages ()方法
我们可以用
getCurrentPages ()
方法来获取当前页面的所有信息,如data数据
- 跳转后使用
let pages = getCurrentPages()
获取当前页面栈的信息 - 得到并保存用户的输入值
-
let prevPage = pages[pages.length - 2]
这是上一个页面的信息 -
prevPage.setData({[上一页data中的key]:[输入的值]})
;
这样我们就把数据保存到了上一页的data
中
实例操作
departureCity.js
中我们这样写:
returnAddress
这个方法绑定了confirm
事件,用户点击手机键盘的确定按钮就会跳转回去
returnAddress:function(e){
//本页即departureCity
let pages = getCurrentPages()
//上一页即productList
let prevPage = pages[pages.length - 2]
//得到用户的输入值
let inputValueA= e.detail.value
prevPage.setData({
//inputValue是productList.js里面data里面的定义的,我们把inputValueA的值赋给它
inputValue:inputValueA
})
// 返回上一级页面。即跳转到productList的页面
wx.navigateBack({
delta: 1
})
},
这样我们的productList
页面就拿到了用户的输入值,这个值就储存在productList.js
的data
里,this.data.inputValue
这个就是用户的输入值