/*
模板文件结构
template 只是一个占位符
*/
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image src="avatar" class="post-author"></image>
<text class="post-date">{{date}}</text>
</view>
<text class="post-title">{{title}}</text>
<image src="{{imSrc}}" class="post-image"></image>
<text class="post-content">{{content}}</text>
<view class="post-like">
<image src="../images/chat.png" class="post-like-img"></image>
<text class="post-like-font">{{collection}}</text>
<image src="../images/chat.png" class="post-like-img"></image>
<text class="post-like-font">{{collection}}</text>
</view>
</view>
</template>
页面列表
<import src="../模板名称.wxml" />
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx" wx:key=" ">
<view bindtap="onPostTap" data-postid="{{item.postid}}">
<template is="postItem" data="{{...item}}" />
</view>
</block>
<-- ----------------------------------------------------------------------------------------- !-->
var postsData = require('../data/post-data.js')
Page({
data:{
},
onLoad:function(){
this.setData({
posts_key:postsData.postList
});
},
onPostTap:function(event){
var postId = event.currentTarget.dataset.postid;
wx.navigeteTo({
url: "../post/post-detail?id=" + postId
})
}
})
var local-database = [
{
title: "",
content: "",
imgSrc: "",
date: "",
postid: "0"
},
{},
{}.
],
module.exports = {
postList : local-database
}
详情页面
//详情页的数据也写在post-data.js本地数据中
//详情页面,拿到相应的id,动态绑定数据
var postsData = require("../../data/post-data.js")
Page({
data:{},
onLoad:function(option){
// 这里的id对应页面列表js中的id值
var postId = option.id;
var postDatas = postsData.postList[postId]; // postList 是一个数组,postDatas拿到数据
//绑定数据,把postDatas放入到数据绑定变量(data)中
this.data.postDatas = postDatas;
},
/*
分析:
1、详情页面结构中要加 postData对象,不然数据不能完整显示 ,如{{postData.title}}, 为什么?
因为值并不是直接赋值到data中,把javascript对象用 postDatas变量名表示之后,
用作为data的一个属性放在这里,所以前面要加上postDatas
-
2、如果在onLoad方法中,不是异步的去执行一个数据绑定,则不需要使用this.setData方法,
只需要对this.data赋值即可实现数据绑定! 为什么?
异步方法是无法保证this.data这一段代码的执行是在onLoad方法之前发生的,有可能
this.data还没执行,onLoad就就执行完了。而同步代码this.data则不会出现这个情况!
- 生命周期
-
- 涉及数据绑定的都可用this.setData方法来做数据绑定
- 运用AppData观察数据显示情况
*/
})