袁凤鸣的博客 | Fleeming's Blog Front-end Dev Engineer

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

2018-02-04
袁凤鸣

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

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

说明:代码块中 识别不了,会将置为空白。故打成 {{XXX}}

  • 详情页面事件绑定
<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后为加入{}


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏博主

请科学上网看评论 😂

Enjoy music ?
Search
    Content