小程序--模板的使用 说明--详细版的

在这里插入图片描述
在小程序的模板介绍并不完整
在创建模板的之前,应该创建XX的wxml的文件(这个文件最好是单独存放模板的文件)
在这里插入图片描述
然后在需要的引用的wxml页面里面引用自己定义的模板

<!--展示页wxml-->
<import src="../logs/logs.wxml"/>  
<!-- //引入模板的wxml文件 -->

<view class="container" wx:for="{{dd}}">
<template is="msgItem" data="{{...item}}" />
     <!-- <template is="{{eg.data.length> 0 ? 'data' : 'noData'}}" data="{{...eg}}"></template>  -->
       <!-- //此时进行判断该用哪个模板--判断template 的name属性,eg是指要传入模板的数据 -->
</view>

在这里插入图片描述
引用wxss的样式


@import "../logs/logs.wxss" 
/* //使用import定义 */

在这里插入图片描述
数据的赋值 在js页面定义并且在wxml页面直接的赋值 数值wx:for="{{}}"
在这里插入图片描述

效果
在这里插入图片描述

切记用他一定要引用

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

//模板引用
<import src="../logs/logs.wxml"/>  
<!-- //引入模板的wxml文件 -->


//使用
<template is="msgItem" data="{{...item}}" />
     <!-- <template is="{{eg.data.length> 0 ? 'data' : 'noData'}}" data="{{...eg}}"></template>  -->
       <!-- //此时进行判断该用哪个模板--判断template 的name属性,eg是指要传入模板的数据 -->
</view>




//样式引入
@import "../logs/logs.wxss" 

猜你喜欢

转载自blog.csdn.net/weixin_42021688/article/details/86665280