多对一数据绑定、template的妙用（微信小程序）-向日葵屋

多对一数据绑定、template的妙用（微信小程序）

Detail.wxml

{ {detail.author}}发表于{ {detail.dateTime}}{ {detail.title}} { {detail.detail}}

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

<!--item代表一个子元素，用item.xxx的方法来进行一个单一元素绑定-->
<!--//template-->
<view catchtap="onPostTap" data-postId="{
    {item.postId}}"><!--postId方法用来确认点击的是哪一则新闻、data-postId自定义数据-->
  <!--catch绑定事件就不会出发冒泡事件-->
  <template is="postItem" data="{
    {...item}}" />
复制代码
</view>
复制代码

template的使用

index-template.wxml { {date}}{ {title}}{ {content}}{ {collection}}{ {reading}}

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里面哪篇文章跳转到哪篇页面
    })
}
复制代码