從0到1完成小程序開發(4)

組件的自定義數據屬性

點擊每個電影卡片進行響應，給每個卡片元素綁定一個Tab事件處理函數。

新增detail頁

加上標題 在detail.wxml中添加一個內容爲page的text標籤

當點擊recommend頁的卡片跳轉至detail詳細信息頁

 

 在全局配置文件中對新增的detail頁進行配置。

 

 

在recommend頁找到幻燈片頁對應的view元素，而後給它綁定一個tab事件的事件處理函數。

 <view bindtap="f1">//綁定函數值f1

定義事件處理函數f1

  f1:function(event){
    wx.navigateTo({    //作一個基本的導航跳轉邏輯
      url: '/pages/detail/detail',//目標頁路徑
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

 如今完成了一個基本跳轉，點擊每個幻燈片卡片均可以跳轉到detail頁。

可是每一次跳轉到detail頁 它顯示的信息都是同樣的。

組件的自定義數據屬性：向邏輯層的業務數據傳遞

但願顯示對應電影的詳情信息該怎麼作？

那麼就須要對detail頁作一個參數化的處理，在導航跳轉的時候給detail頁指定一些參數，明確告訴它被打開以後進一步顯示什麼樣的信息。

  f1:function(event){
    wx.navigateTo({
      url: '/pages/detail/detail?id=15',//給路徑增長一個參數
    //意思是但願從當前頁面跳轉到detail頁而且顯示對應id爲15的電影詳情

如何在這個事件處理函數中找到這次頁面跳轉須要指定的id取值?

    huanDp:[//給每一個對象新增一個id取值
      {
        name:'王牌對王牌',
        img:'/imgs/wpdwp.jpg',
        id:15
      },
      {
        name: '朋友清聽好',
        img: '/imgs/pyqth.jpg',
        id: 16
      },
      {
        name: '特工007',
        img: '/imgs/tg.jpg',
        id: 17
      },
    ]

  <view bindtap="f1">
    <swiper class="swiper" previous-margin="25px" next-margin="25px">
      <swiper-item wx:for="{{huanDp}}">
        <image src="{{item.img}}"></image>
        <text>{{item.name}}id值：{{item.id}}</text>//把id值顯示到視圖上
      </swiper-item>
    </swiper>
  </view>

接下來當每個電影的veiw元素被點擊的時候將這個電影id的值傳遞給對應的事件處理函數處理。

經過事件對象event訪問currentTarget屬性找到當前被點擊的這個view元素

 

當卡片被點擊以後 在接收到的數據中把currentTarget屬性打印出來

  f1:function(event){
    console.log(event.currentTarget)

 

 

 id 紀錄的是當前元素的id取值

dataset屬性就是組件元素自定義屬性

舉個例子

在view元素中添加一個自定義屬性data-user-name="asdasd"

  <view bindtap="f1" data-user-name="asdasd">

如今再點擊一下卡片元素，能夠看到控制檯輸出的dataset屬性值和asdasd對應

因此當咱們想要將view元素所關聯的電影id傳遞給它所對應的事件處理函數進行使用的時候，在view元素定義一個自定義屬性來紀錄這個電影id。

<view bindtap="f1" data-huanDp-id="{{item.id}}">

 

 

 在事件函數f1中輸出一下這個自定義屬性

  f1:function(event){
    var huanDp = event.currentTarget.dataset.huandpId
    console.log(huanDp);

 

 顯示當前點擊卡片id值爲15

 

 

 經過這種方式獲取到的當前view元素所關聯的電影id能夠直接用於dateil頁的完整url的生成。

給以前跳轉路徑url中的id參數取值進行設置：

  f1:function(event){
    var huanDp = event.currentTarget.dataset.huandpId
    console.log(huanDp);

    wx.navigateTo({
      url: '/pages/detail/detail?id=' + huanDp,