微信小程序开发笔记（三）——模板

最新推荐文章于 2024-07-07 06:25:00 发布

原创最新推荐文章于 2024-07-07 06:25:00 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序开发笔记专栏收录该内容

4 篇文章

订阅专栏

为什么要用模板呢？

当多个页面需要有一样的组件时，使用模板会比较方便。

Table of Contents

2. template.wxml里的模板、页面传值

3. js中的事件定义

一、定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
使用模板

二、使用模板

如果模板的定义不在当前的wxml文件里，使用之前记得先import！

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

三、列表渲染+模板+页面传值

1. 列表渲染

首先记得import！

<import src="/pages/templates/template.wxml"/>

    <view hidden="{{isMonitor}}" class="infoBox2" wx:for="{{taskList}}" wx:for-index="idx" wx:for-item="task" hover-class="click-active">
      <template is="taskList" data="{{task:task, idx:idx, myId: myId, project:projectList[idx]}}" />
    </view>

    <view hidden="{{!isMonitor}}" class="infoBox2" wx:for="{{taskList}}" wx:for-index="idx" wx:for-item="task" hover-class="click-active">
      <template is="taskList" data="{{task:task, idx:idx, myId: myId, project:projectList[idx]}}" wx:if="{{task.monitorId==myId}}" />
    </view>

2. template.wxml里的模板、页面传值

<template name="taskList">
  <view  class="{{myId==task.monitor.id? 'monitor' : ''}}" bindtap="toTaskInfo" data-task="{{task}}" data-project="{{project}}">
    <view class="block1">
      <view class="title"> 
        <view wx:if="{{myId !==task.monitorId}}" class="img"> <image src="/images/task.png" /> </view>
        <view wx:if="{{myId ==task.monitorId}}" class="img"> <image src="/images/monitor3.png" /> </view>
        <text> {{task.name}} </text>
      </view>
      <view class="status"> {{task.state}} </view>
    </view>

    <view class="block2">
      <view class="infoTitle"> 所属项目: </view>
      <view class="infoContent"> {{project.name}} </view>
    </view>

    <view class="block2">
      <view class="infoTitle"> 岗位描述: </view>
      <view class="infoContent"> {{task.description}} </view>
    </view>

    <view class="block2">
      <view class="infoTitle"> 起止日期: </view>
      <view class="infoContent"> {{"自"+ task.startDate+"至" +  task.endDate }} </view>
    </view>
  </view>
</template>

3. js中的事件定义

  /*跳转到岗位详情页*/
  toTaskInfo: function(e){
    console.log("e.currentTarget.dataset.task = ", e.currentTarget.dataset.task)
    var task = encodeURIComponent(JSON.stringify(e.currentTarget.dataset.task))
    var project = encodeURIComponent(JSON.stringify(e.currentTarget.dataset.project))
    wx.navigateTo({
      url: '../task/taskInfo/taskInfo?task=' + task + '&project=' + project,
    })
  },