• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序——template详细使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

1.1定义模板

1.1.1、创建模板文件夹

 

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

<!-- 使用 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>
.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.2、使用模板

1.2.1、创建index8

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

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

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

1.2.3、在index8的wxss引入index7的样式

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

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

  data: {
    message:[
      {
        mentor_image_uri:"../../image/timg3.jpg",
        mentor_name:"lhs",
        career: "程序员",
        company_name:"aft",
        address:"珠海",
        "mentor_skills":"微信小程序"
      },
      {
        mentor_image_uri: "../../image/timg.jpg",
        mentor_name: "lwx",
        career: "美工",
        company_name: "aft",
        address: "珠海",
        "mentor_skills": "PS"
      }
    ]
  },

运行结果:

1.2.5、如果只想显示其中的一条数据,修改代码如下:

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

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

 

 

 

1.3、is 属性的使用

1.3.1、在index7定义两个模板(tem_2和tem_3);

<!-- 动态数据 -->
<template name="tem_2">
    <!-- 显示 -->
    <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>


<!-- 默认,不动态写入数据-->
<template name="tem_3">
    <!-- 显示 -->
    <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="../../image/timg.jpg" mode="aspectFill"></image>
    </view>
    <view class=\'info\'><span>姓名:</span>lcy</view>
    <view class=\'info\'><span>职位:</span>程序员</view>
    <view class=\'info\'><span>公司:</span>未知</view>
    <view class=\'info\'><span>地区:</span>珠海</view>
    <view class=\'info\'><span>擅长:</span>爱笑</view>
    <navigator>详情</navigator>
    <view class=\'hr\'></view>
</template>

1.3.2、在index8使用模板;这里使用is 属性声明需要的使用的模板,另外is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板

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

<!-- is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板 -->
<block wx:for="{{message2}}">
  <!-- 1==1是true,所以使用tem_2模板 -->
  <template  is="{{1 == 1 ? \'tem_2\' : \'tem_3\'}}" data="{{...item}}"/>
</block>
1.3.3、在index8.js动态写入数据
  data: {
    message2:[
      {
        mentor_image_uri: "../../image/timg2.jpg",
        mentor_name: "ljq",
        career: "护士",
        company_name: "中山远大医院",
        address: "中山市",
        "mentor_skills": "爱看书"
      }
    ]
  },

结果如下:

 

总结

  • 在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;
  • 在同一个WXML文件中创建多个类似的模板用name属性来区别;
  • 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量;
  • 使用 import 引入模板 WXML 和 WXSS ;
  • 通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 component组件的使用 以及 传值发布时间:2022-07-18
下一篇:
微信小程序(template的使用)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap