小程序—跳转数据传递

一：页面之间如何跳转

1）可通过类似a的标签

<navigator url = "/pages/aaa/aaa" hover-class="none">跳转到新页面</navigator>

点击时默认有底色，可设置 hover-class取消，或设置成自己想要的颜色

设置redirect 属性会关闭前一张页面

2）通过JS

 wx.navigateTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）

         url:"/pages/aaa/aaa"

    })
 
   wx.redirectTo({      //关闭当前页面，跳转到应用内的某个页面（这个跳转有个坑，就是跳转页面后页面会闪烁一下，完全影响了我自己的操作体验，太缺德了。）

          url:"/pages/aaa/aaa"

     })

  wx.reLaunch({     //跳转至指定页面并关闭其他打开的所有页面（这个最好用在返回至首页的的时候）

    url:'/pages/index/index'

  })

    wx.switchTab({    //跳转到tabBar页面，并关闭其他所有tabBar页面

           url:"/pages/aaa/aaa"

     })

    wx.navigateBack({     //返回上一页面或多级页面
          delta:1
    })

二：跳转之间如何数据共用

1）app.js里面设置globalData：{ urlBase:XXX }全局变量

在list.js子页面里面通过初始化可以访问

var myApp = getApp();
var urlBase = myApp.globalData.urlBase;

2) 存储于wx本地缓存，个人认为适于存个人用户信息

3) 返回页面的时候数据传递方法，在传递前将数据设置到上一个页面

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

4）有时候会想把列表页的数据带入到详情页面，此时不是一个参数而是一个对象数据，此时应转成字符串传入

//这里我们跳转详情界面
queryItemClick: function (e) {
    var that = this
    //拿到点击的index下标
    var index = e.currentTarget.dataset.index
    //将对象转为string
    var queryBean = JSON.stringify(that.data.queryList[index])
    wx.navigateTo({
      url: '../queryResult/queryResult?queryBean=' + queryBean,
    })
  }

我们用JSON.stringify()函数将实体转成string类型进行传递，那么我们在看看接收参数

/***重点内容*
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    var queryBean = JSON.parse(options.queryBean);
    that.setData({
      queryBean: queryBean
    })
    //console.log(that.data.queryBean)
  }

在生命周期函数onLoad中获取我们传递的实体转的字符串，然后用JSON.parse（）转成实体，最后赋值给我们的全局变量。

参考链接：https://www.cnblogs.com/caicaizi/p/6652103.html

三：点击时带标签属性

一般在多层嵌套view会遇到问题，如果想要阻止子元素事件冒泡到父元素，事件绑定可以不用bindtap，用 catchtap="btnZhifu"

父元素绑定事件去获取属性的时候既能获得自己而且能获得点击子元素的属性，比如点击中文的时候用e.target.id并不能取到，如果区分，用currentTarget

<view class="">{{nowMouth}}月月票<text class="red">距{{nowMouth}}月结束还有{{leftDay}}天</text></view>
<view class="t2" >月票首次起充金额为50元，范例：55元、60元</view>
</view>
</view>

首先我要说下target和currentTarget的区别。
e.target是返回触发事件的对象 e.currentTarget返回的是绑定事件的对象。
认真看这段话：
通常情况下target和currentTarget是一致的，我们只要使用target即可，但有一种情况必须区分这两者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象。
在你的第一种情况中，可能触发这个事件的并非是这个子元素。所以也就没有返回你想要的那个target。
而在你的第二种情况中，可能恰巧触发这个事件的就是含有data-name的这个text标签，所以也就返回了你想看到的那个target

posted on 2018-05-25 17:09 小海豚Dolphins 阅读(230) 评论(0) 编辑收藏举报

刷新页面返回顶部