微信小程序——template使用

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

定义模板

1、创建模板文件夹

 

 

 

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

index.wxml

<!-- 使用 name 属性，作为模板的名字 -->
<template name="personCourseItemTmp">
    <!-- 显示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默认图片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
    </view>
  
    <view class='info'><span>姓名：</span>{{mentor_name}}</view>
    <view class='info'><span>职位：</span>{{career}}</view>
    <view class='info'><span>公司：</span>{{company_name}}</view>
    <view class='info'><span>地区：</span>{{address}}</view>
    <view class='info'><span>擅长：</span>{{mentor_skills}}</view>
    <navigator>详情</navigator>
    <view class='hr'></view>
</template>

 

wxss

.name {
    text-align: center;
}

.widget_arrow {
    margin-top: 20px;
    height: 200px;
    width: 200px;
    margin-left: 25%;
}

.info {
    font-size: 14px;
  width: 370rpx;
  margin: auto;
  margin-top: 10px;
}
.info span{
  font-weight: 600;
}

.info_border {
    height: 200px;
    width: 200px;
    border: 8px solid red;
}

navigator {
    margin: 0 auto;
    height: 40px;
    width: 90%;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: green;
    line-height: 40px;
    text-align: center;
}

.hr {
    height: 0;
    width: 100%;
    border: 1px solid green;
}

 

使用模板

1、创建index8

 

 

 

 2、在需要使用的页面使用import导入该wxml页面，注意路径位置

<!-- 引入模块 -->
<import src="../index7/index.wxml" />

<block wx:for="{{message}}" wx:key="id">
  <template  is="personCourseItemTmp" data="{{...item}}"></template>
</block>

 

3、在index8的css引入index7的样式

@import "../index7/index.wxss"

 

4、在index8的js动态写入数据

  data: {
    message:[
      {
        mentor_image_uri:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568915845390&di=5869e0800f62408732666af4b5cdb8b3&imgtype=0&src=http%3A%2F%2Fpic27.nipic.com%2F20130320%2F11295670_210523384101_2.jpg",
        mentor_name:"lhs",
        career: "程序员",
        company_name:"aft",
        address:"珠海",
        "mentor_skills":"微信小程序"
      },
      {
        mentor_image_uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568915927456&di=26e1c8cd5943c7882d262e400824c485&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F09%2F20141209153333_GxPwi.jpeg",
        mentor_name: "lwx",
        career: "美工",
        company_name: "aft",
        address: "珠海",
        "mentor_skills": "PS"
      }
    ]
  },

 

 

运行结果：

 

 

 

 

如果只想显示其中的一条数据，修改代码如下：

<!-- 引入模块 -->
<import src="../index7/index.wxml" />

<block wx:for="{{message}}" wx:key="id">
  <template wx:if="{{index==0}}"  is="personCourseItemTmp" data="{{...item}}"></template>
</block>

 

标签：name,微信,程序,height,width,mentor,template,margin,模板
来源： https://www.cnblogs.com/bushui/p/11553366.html