微信小程序：通过一个小技巧变相实现navigator带参数跳转

应用场景：

经常会用到类似下面的列表界面，

在这种界面，用户通过点击操作选中某条记录，选中之后进行页面跳转，并把选中的记录相关信息传递到下一个页面。出于保持良好用户体验的考虑，用户点击时，希望有navigator那样的“背景变灰”的按压效果，但navigator不支持带参数的url：

故单用navigator无法实现数据传递。如何既保持点击时的界面按压效果，又可以把数据传递到下一个页面呢？后来想到的方法是在<navigator>组件外层，增加一个<view>通过<view>的bindtap函数把数据保存到storage中，新页面再从storage中获取数据。

布局如下：

  <view class="list">
      <view class="items" wx:for="{{store}}" bindtap="onClickStore" data-data="{{item}}">
       <navigator url="/pages/home/home" open-type="switchTab" > 
        // 此处根据自身需求进行布局

       // ...
        </navigator>
      </view>
  </view>

 

相关js代码：

当前列表页面，在onClick回调函数中把数据存入storage

  onClickStore: function (e) {

    let data = e.currentTarget.dataset.data;

    wx.setStorageSync('key', JSON.stringify(data));

  },

在所跳转到的页面，把数据从storage中提取出来

  onShow: function () {

    let data = JSON.parse(wx.getStorageSync('key');

  },

这样，就既保持了用户点击时的按压效果，又实现了跳转页面之间的数据传递。