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

（新闻详情页面：Detail         新闻首页：Index          模拟本地数据：posts-data,js）

 

Detail.wxml

?

1 2 3 4 5 6 7 8 9 10 11

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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(这个脚本用来模拟本地数据库)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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",<br>　　　　　//下面内容是post-detail里面的数据　         headImgSrc: "/images/Catoon10.jpeg",         author: "乔-瓦尔登",         dateTime: "三天前",         detail: "今天NBA主要发生了以下几件事情...",         postId: 1, }, ] module.exports = {     postList: local_database }

　　

Index.wxml

?

1 2 3 4 5 6 7 8 9 10 11

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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