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

约定不等于承诺〃 2022-01-20 08:59 199阅读 0赞

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反正不会有错][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

<view catchtap="onPostTap" data-postId="{
        {item.postId}}">
      
      <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里面哪篇文章跳转到哪篇页面
        })
    }
    复制代码

\})

[www.cnblogs.com/EdisonVan/p…][www.cnblogs.com_EdisonVan_p]

[onLoad_this.setData]: https://link.juejin.im?target=%2F%2Fxn--onLoadthis-sj2pa039bhz7alr5b5qiba7110ewehy9ykn0i4xza.xn--setData-bx3k81fxtsvk7c45khg6k
[www.cnblogs.com_EdisonVan_p]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2FEdisonVan%2Fp%2F9031083.html