标签：教程 定义 content 模板 详细 message wxss friend

模板template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

1. 定义模板

（1）定义模板wxml

（2）定义模板wxss

2. 使用模板

（1）常规使用

（2）高效使用

 

定义模板

（1）wxml

<!--templates/message/message.wxml-->
<template name='message'> //模板名称
  <view class="message-group">
    // 模板属性
    <text class='content'>{{content}}</text>
    <text class='friend'>{{friend}}</text>
    <text class='time'>{{time}}</text>
  </view>
</template>

（2）wxss

/* templates/message/message.wxss */
// 模板布局
.message-group {
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px；;
}

.message-group .content {
  float: left;
  align-content: center;
  justify-content: center;
}

.message-group .friend {
  float: right;
  font-size: burlywood;
  font-size: 12p
}

使用模板 

常规使用模板

<!-- 先导入模板 -->
<!-- ../../../ 返回顶层目录 -->
<import src="../../../templates/message/message.wxml"/>

<!-- 引用模板 -->
<template is="message" data="{{content:'我们一起去唱歌吧！', firend:'周杰伦'}}"/>

效果如图

 

高效使用模拟服务端请求

js

//js文件，绑定数据  
data: {
    messages: [{
        content: '我们一起去唱歌吧！',
        friend: '周杰伦'
      },
      {
        content: '我给你做十二道锋味！',
        friend: '谢霆锋'
      }
    ]
  }

 wxml

<!-- 循环取数据，模仿服务端 -->
<template is = "message" wx:for="{{messages}}"
data="{{content:item.content, friend:item.friend}}"/>

<!-- ...item自动解包 -->
<template is = "message" wx:for="{{messages}}"
data="{{...item}}"/> 

...item 可以自动解包 

效果如图

 

 

 

 

 

 

 

标签：教程,定义,content,模板,详细,message,wxss,friend
来源： https://blog.csdn.net/m0_37218227/article/details/106680934

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。