(新闻详情页面:Detail 新闻首页:Index 模拟本地数据:posts-data,js)
Detail.wxml
<image class="head-image" src="{{detail.headImgSrc}}"></image> <view class="author-date"> <image class="avatar" src="{{detail.avatar}}"></image> <text class="author">{{detail.author}}</text> <text class="const-text">发表于</text> <text class="date">{{detail.dateTime}}</text> </view> <view class="title">{{detail.title}}</view> <text class="detail"> {{detail.detail}} </text>
Detail.JS
var postsData = require(‘../../../data/posts-data.js‘)
//这个新闻内容文件
Page({
data: {
},
onLoad: function (option) {
var postId = option.id;
var postData = postsData.postList[postId];//这个方法是用来定义每个新闻列表对应的顺序是哪个新闻内容
//不管是不是在onLoad里面直接使用this.setData反正不会有错。
this.setData({
detail: postData //渲染到对应data中就是postData
});
})
Posts-data,js(这个脚本用来模拟本地数据库)
var local_database = [ { avatar: "/images/Catoon5.jpg", date: "May 8 2018", imgSrc: "/images/Catoon50.jpeg", title: "以色列总理用“鞋”招待安倍,日外交官:这是冒犯,不知道我们进门都要脱鞋?", content: "“日本首相觉得内塔尼亚胡家中鞋子上的甜点冒犯了他...。", collection: "192", reading: "9668", //下面的内容是post-detail里面的数据 headImgSrc: "/images/Catoon50.jpeg", author: "郭鹏飞", dateTime: "三天前", detail: "【环球网报道 记者 郭鹏飞】日本首相安倍晋三上周访问以色列,...", postId: 0 }, { avatar: "/images/Catoon1.jpg", date: "May 8 2018", imgSrc: "/images/Catoon10.jpeg", title: "欧文惨遭伤病", content: "欧文已经因为膝盖酸痛问题休战了...", collection: "92", reading: "189",
//下面内容是post-detail里面的数据 headImgSrc: "/images/Catoon10.jpeg", author: "乔-瓦尔登", dateTime: "三天前", detail: "今天NBA主要发生了以下几件事情...", postId: 1, }, ] module.exports = { postList: local_database }
Index.wxml
<import src="post-item/index-template.wxml" /> <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"> <!--把wx:for="{{posts_key}}",用数组的形式来绑定多个新闻块的内容,利用for循环来反复调用后台数据,如果没用用posts_key了,那么对应的item_这种命名就是不可以的--> <!--item代表一个子元素,用item.xxx的方法来进行一个单一元素绑定--> <!--//template--> <view catchtap="onPostTap" data-postId="{{item.postId}}"><!--postId方法用来确认点击的是哪一则新闻、data-postId自定义数据--> <!--catch绑定事件就不会出发冒泡事件--> <template is="postItem" data="{{...item}}" /> <!--使用...item就可以让template里面的变量前面不用加上item.了,否则都应该是item.变量名的写法--> </view> </block>
template的使用
index-template.wxml
<template name="postItem"> <view class="post-container"> <view class="post-author-date"> <!--常见的一列四行布局--> <image class="post-author" src="{{avatar}}"></image> <text class="post-date">{{date}}</text> </view> <view> <text class="post-title">{{title}}</text> <image class="post-image" src="{{imgSrc}}"></image> <text class="post-content">{{content}}</text> </view> <view class="post-like"> <image class="post-like-image" src="../../images/icon/star.png"></image> <text class="post-like-font">{{collection}}</text> <image class="post-like-image" src="../../images/icon/view.png"></image> <text class="post-like-font">{{reading}}</text> </view> </view> </template>
Index.js
var postsData = require(‘../../data/posts-data.js‘) Page({ data: { }, /** 生命周期函数--监听页面加载*/ onLoad: function (options) { //页面初始化options为页面跳转所带来的参数 //把wxml中改成wx:for="{{posts_key}}",用数组的形式来绑定多个新闻块的内容,利用for循环来反复调用后台数据 this.setData({ posts_key: postsData.postList //渲染到对应data中就是posts_key:[] }); }, onPostTap: function (event) { //用JS来捕获postId从而让事件知道我们点击的是哪条新闻,event是框架所给的默认事件对象。 var postId = event.currentTarget.dataset.postid;// currentTarget当前鼠标点击的一个事件对应wxml所绑定事件处的view,dataset所有的自定义数据的一个集合,wxml对应的就是data-postId。data自定义的字符只有连字符的第一个字母能大写,如果不是连字符的第一个字母,它默认会被转化为小写。所有我们在wxml定义一个data - postId后,在js中应用时就写成event.currentTarget.dateset.postid; wx.navigateTo({ url: "post-detail/detail?id=" + postId //?id=" + postId ? id+路径后面是接参数id 将postId传递到post-detail中从而让detail页面知道对应点击post里面哪篇文章跳转到哪篇页面 }) } })