多對一數據綁定、template的妙用（微信小程序）

（新聞詳情頁面：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里面哪篇文章跳轉到哪篇頁面
        })
    }
})