小程序定义自定义属性

背景

页面跳转过程中，为了使后面的页面更好的加载信息，

需要传递参数给后来的页面。

小程序传递参数有两种办法：

一种是定义一个自定义属性并传递，

一种是在路由组件的url中加入参数。

基本用法

数据

insex.js:

data: {
    postList : [
      {  id:0,
        title: "2020LPL夏季赛季后赛观赛指南",
      content: "8月9号，LPL常规赛收官之战结束，在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为，TES、JDG、IG、SN、V5、LGD、WE、FPX",
      imgSrc: "/images/lpl.png"},
      {  id:1,
        title: "LPL2020夏季赛一阵阵容",
      content: "iG在本赛季大胆更换了下路组合，没有人料想到全新阵容能够迅速起飞，iG在常规赛中只输了两场比赛，队伍的整体状态非常出色。",
      imgSrc: "/images/bestplayers.png",},
      {title: "飞驰的人生",
      content: "《飞驰人生》应该是韩寒三部曲的第三部。从《后悔无期》到《乘风破浪》再到《飞驰人生》",
      imgSrc: "/images/jumpfly.png"
      }
    ]
  },

WXML

<view data-id="{{postList[0].id}}" bind:tap="onGoToDetail" class="post-container">点击详情</view>
<view data-id="{{postList[1].id}}" bind:tap="onGoToDetail" class="post-container">点击详情</view>

JS

 onGoToDetail(event){
    //console.log(event)//打印事件
    console.log(event.currentTarget.dataset.id)
      // wx.navigateTo({
      //   url:'/pages/post-detail/post-detail'
      // })
  },

输出

[自动热重载] 已开启代码文件保存后自动热重载（不支持 json）
index.js? [sm]:25 0
index.js? [sm]:25 

在列表渲染中使用

数据

insex.js:

data: {
    postList : [
      {  id:0,
        title: "2020LPL夏季赛季后赛观赛指南",
      content: "8月9号，LPL常规赛收官之战结束，在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为，TES、JDG、IG、SN、V5、LGD、WE、FPX",
      imgSrc: "/images/lpl.png"},
      {  id:1,
        title: "LPL2020夏季赛一阵阵容",
      content: "iG在本赛季大胆更换了下路组合，没有人料想到全新阵容能够迅速起飞，iG在常规赛中只输了两场比赛，队伍的整体状态非常出色。",
      imgSrc: "/images/bestplayers.png",},
      {title: "飞驰的人生",
      content: "《飞驰人生》应该是韩寒三部曲的第三部。从《后悔无期》到《乘风破浪》再到《飞驰人生》",
      imgSrc: "/images/jumpfly.png"
      }
    ]
  },

WXML

<view wx:for="{{postList}}">
  <view data-id="{{item.id}}" bind:tap="onGoToDetail" class="post-container">点击详情</view>
</view>

JS

    console.log(event)//打印事件
    console.log(event.currentTarget.dataset.id)
      // wx.navigateTo({
      //   url:'/pages/post-detail/post-detail'
      // })
  },

输出

[自动热重载] 已开启代码文件保存后自动热重载（不支持 json）
index.js? [sm]:25 0
index.js? [sm]:25