多對一數據綁定、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   

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裏面哪篇文章跳轉到哪篇頁面
    })
}
複製代碼

})

www.cnblogs.com/EdisonVan/p…