Applet complete development from 0 to 1 (4)

Custom properties of the component data

Click on each movie card responds to each card a Tab element binding event handler.

Add detail page

Plus add a title for page content in detail.wxml the text label

When click recommend page jump to detail card details page

 

 Configure the new detail page in the global configuration file.

 

 

View element found in the corresponding slide page recommend page, and then bind it to a tab event handler event.

 < View bindtap = "f1" > // binding function values f1

Define an event handler function f1

  f1:function(event){
    wx.navigateTo ({     // do a basic navigation navigation logic 
      URL: '/ Pages / Detail / Detail', // target page path 
      Success: function (RES) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

 Now completed a basic jump, click on each slide card can jump to the detail page.

But every time it jumps to the detail page information displayed is the same.

Custom data attributes components: the data transmitted to the service logic layer

I want to display information corresponding to the details of how to do a movie?

Then you need to do a deal with the parameters of the detail page, specify a number of parameters to the detail page navigation when the jump, clearly tell it what kind of information is further displayed after being opened.

  f1:function(event){
    wx.navigateTo({
      url: '/ Pages and the / detail / detail id = 15?', // to add a path parameter 
    // meaning is to jump from the current page to the detail page and displays the corresponding id of the movie details 15

How to find the page you need to specify the id to jump in this event handler?

    huanDp: [ // for each object id add a value of 
      {
        name: 'Negotiator' ,
        img:'/imgs/wpdwp.jpg',
        id:15
      },
      {
        name: 'Listen friend clear' ,
        img: '/imgs/pyqth.jpg',
        id: 16
      },
      {
        name: 'Agent 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 values: {{item.id}} </ text> // the value is displayed on the view id
      </swiper-item>
    </swiper>
  </view>

Then when veiw every element of the film clicked this movie id value passed to the event handler corresponding treatment.

Find the current view element is clicked this event currentTarget property to access the object event by

 

When the card is clicked in the received data in the print attribute currentTarget

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

 

 

 id is the id of the record value of the current element

dataset property is the component elements custom properties

for example

Add a custom attribute data-user-name = "asdasd" element in view

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

Now and then click the card elements, you can see the console output dataset property values ​​and the corresponding asdasd

So when we want to pass the associated view movie id element to its corresponding event handler will be used when, view element defines a custom attribute to record the movie id.

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

 

 

 Output at the event function f1 in this custom properties

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

 

 Click to display the current value of 15 id cards

 

 

 Movie id associated with acquired in this way the current view element can be directly used to generate the complete url of dateil page.

Id arguments to be set before the jump path url:

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

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