微信小程序入门与实战(6-1)

• 6-1 从文章列表跳转到新闻详情页面（组件自定义属性及获取属性）
• 注意：

微信小程序入门与实战 常用组件API开发技巧项目实战

6-1 从文章列表跳转到新闻详情页面（组件自定义属性及获取属性）

• 详情页面事件绑定

<view wx:for="{{postList}}" wx:key="idx" >
  <view catchtap="onPostTap" >
      <template is="postItem" data="{{...item}}" />
  </view>
</view>

注意：

• catchtap="onPostTap" 事件不能直接绑定到template标签中，template只是一个占位符，编译以后就不存在template标签了。

• 页面之间自定义传值

    <view wx:for="{{postList}}" wx:key="idx" >
      <view catchtap="onPostTap" data-postId="{{item.postId}}">
          <template is="postItem" data="{{...item}}" />
      </view>
    </view>
  

  • data-自定义变量名称="{{要传入的值}}"

  • 在自定义函数onPostTap中接收传过来的值：

     onPostTap: function (event) {
         var postId = event.currentTarget.dataset.postid;
         console.log("onPostTap id is" + postId);
     }
    

  • 使用event.currentTarget.dataset.自定义变量名称接收。dataset中包含多个传过来的值集合

注意：

• 出现问题：appservice:1187 pages/posts/post-detail/post-detail.js 出现脚本错误或者未正确调用 Page()
  • 这是因为post-detail.js中未加入Page({})方法。
• 出现问题：VM2947:2 pages/posts/post-detail/post-detail.json 文件解析错误 SyntaxError: Unexpected end of JSON input
  • 这是因为新建post-detail.json后为加入{}