微信小程序item怎么页面传参

807
2021/3/19 15:57:05
栏目: 云计算
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

微信小程序item怎么页面传参

微信小程序item页面传参的案例:

A页面

data-id="{{item.id}}"为标记列表的下标,

item.id的来源与wx:for="{{ components }}"的列表渲染

bindtap="readArticle"点击事件

在for循环的时候会报异常,加wx:key=""异常就不会出现了

wxml文件代码

<view class="grids-small">

<block wx:for="{{ components }}" wx:key="">

<view class="grid" bindtap="readArticle"  data-id="{{item.id}}">

<view class="grid_icon">

<image class="grid_icon" src="../resources/room.jpg" alt="" />

</view>

<view class="grid_label">{{ item.title }}</view>

     </view>

</block>

</view>

js文件代码

readArticle:function(e){

    var $data = e.currentTarget.dataset;

    console.log('$data===啊哈哈' + $data.id);

    wx.navigateTo({

      url: '/pages/index/index?id='+ $data.id ,

    })

  }

B页面代码

/**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var $data = options.id;

    console.log('onLoad' + $data)

    console.log('options======' + $data);

    

  },


辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: 个人小程序和企业小程序的区别有哪些