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

Posted 2020-11-04 EdisonVan

（新闻详情页面：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里面哪篇文章跳转到哪篇页面
        })
    }
})