微信小程序入门与实战(7)——使用自定义组件改写posts页面

wxml

<view bind:tap="onTap" class="post-container">
  <view class="post-author-date">
    <image class="post-author" src="{{res.avatar}}"></image>
    <text class="post-date">{{res.date}}</text>
  </view>
  <text class="post-title">{{res.title}}</text>
  <image class="post-image" src="{{res.imgSrc}}"></image>
  <text class="post-content">{{res.content}}</text>
  <view class="post-like">
    <image class="post-like-image" src="../../img/icon/chat.png"></image>
    <text class="post-like-font">{{res.reading}}</text>
    <image class="post-like-image" src="../../img/icon/view.png"></image>
    <text class="post-like-font">{{res.collection}}</text>
  </view>
</view>

wxss

/* components/posts/index.wxss */
.post-container{
  display: flex;
  flex-direction: column;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  margin-top: 20rpx;
  background-color: #fff;
}
.post-author-date{
  display: flex;
  flex-direction: row;
  margin: 10rpx 0 20rpx 10rpx;
  align-items: center;
}
.post-author{
  height: 60rpx ;
  width: 60rpx;
}
.post-date{
  margin-left: 20rpx;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  margin-left: 10rpx;
  margin-bottom: 10rpx;
  color:#333;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 15rpx;
}
.post-content{
  font-size: 28rpx;
  color:#666;
  letter-spacing: 2rpx;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
.post-like{
  display: flex;
  flex-direction: row;
  font-size: 26rpx;
  margin-left: 20rpx;
  align-items: center;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
}

js

// components/posts/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    res:Object
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onTap(event){
      console.log(event);
      const pid = this.properties.res.postId
      this.triggerEvent('posttap',{
        pid
      })
    }
  }
})

posts页面
json

{
  "usingComponents": {
    "posts":"/components/posts/index"
  }
}

wxml

<!--pages/posts/posts.wxml-->
<swiper indicator-dots="{{true}}" vertical="{{false}}" autoplay="{{true}}" intervsl="3000">
  <swiper-item>
    <image src="/img/wx.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/vr.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/iqiyi.png" />
  </swiper-item>
</swiper>

<block wx:for="{{postLists}}" wx:for-item="item">
  <posts bind:posttap="onPostTap" res="{{item}}"></posts>
  <!--
  <view catchtap="onPostTap" data-postId="{{item.postId}}">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../img/icon/chat.png"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="../../img/icon/view.png"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>
  </view>
  -->
</block>

wxss

/* pages/posts/posts.wxss */
swiper{
  width:100%;
  height:600rpx;
}

swiper image{
  width: 100%;
  height:600rpx;
}
/*
.post-container{
  display: flex;
  flex-direction: column;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  margin-top: 20rpx;
  background-color: #fff;
}
.post-author-date{
  display: flex;
  flex-direction: row;
  margin: 10rpx 0 20rpx 10rpx;
  align-items: center;
}
.post-author{
  height: 60rpx ;
  width: 60rpx;
}
.post-date{
  margin-left: 20rpx;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  margin-left: 10rpx;
  margin-bottom: 10rpx;
  color:#333;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 15rpx;
}
.post-content{
  font-size: 28rpx;
  color:#666;
  letter-spacing: 2rpx;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
.post-like{
  display: flex;
  flex-direction: row;
  font-size: 26rpx;
  margin-left: 20rpx;
  align-items: center;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
}
*/

js

// pages/posts/posts.js

import {postLists} from '../../data/data.js'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      postLists
    })
    // console.log(postLists)
  },
  onPostTap(event){
    console.log("posts.js中的onPostTap方法：event——",event);
    var postId = event.currentTarget.dataset.postid||event.detail.pid;
    console.log(postId);
    wx.navigateTo({
      url: 'post-detail/post-detail?id='+postId,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

问题：
使用自定义组件重写posts页面，自定义组件中给定的pid值为什么在event.detail.pid里