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

(新闻详情页面:Detail         新闻首页:Index          模拟本地数据:posts-data,js)

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

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

  

 

 

 

 

 

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

上一篇:Java创建(读取)比较复杂的JSON对象


下一篇:微信小程序在sublime开发代码高亮显示