温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何实现template模板

发布时间:2021-07-06 09:20:13 阅读:113 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下微信小程序如何实现template模板,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

微信小程序template模板使用

前言

微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template。

微信小程序如何实现template模板

效果图

一、模板定义

模板最重要的是模板的名称,即""

以下是实例模板代码

<template name="postItem">
 <view class='post-container'>
  <view class='post-author-date'>
   <image class='post-author' src='{{avatar}}'></image>
   <text class='post-date'>{{date}}</text>
  </view>
  <text class='post-title'>{{title}}</text>
  <image class='post-image' src='{{imgSrc}}'></image>
  <text class='post-content'>{{content}}</text>
  <view class='post-like'>
   <image class='post-like-image' src='/images/icon/chat.png'></image>
   <text class='post-link-text'>{{collection}}</text>
   <image class='post-like-image' src='/images/icon/view.png'></image>
   <text class='post-link-text'>{{reading}}</text>
  </view>
 </view>
</template>

wxss文件

 .post-container {
 display: flex;
 flex-direction: column;
 margin-top20rpx;
 margin-bottom40rpx;
 background-color: white;
 border-bottom1px solid #ededed;
 border-top1px solid #ededed;
 padding-bottom5px;
}
.post-author-date {
 margin10rpx 0 20rpx 10rpx;
}
.post-author {
 width60rpx;
 height60rpx;
 vertical-align: middle;
}
.post-date {
 margin-left20rpx;
 vertical-align: middle;
 margin-bottom5px;
 font-size26rpx;
}
.post-title {
 font-size34rpx;
 font-weight600;
 color#333;
 margin-bottom10px;
 margin-left10px;
 margin-right10px;
}
.post-image {
 margin-left16px;
 width100%;
 height340rpx;
 margin: auto 0;
 margin-bottom15rpx;
}
.post-content {
 color#666;
 font-size28rpx;
 margin-bottom20rpx;
 margin-left20rpx;
 margin-right20rpx;
 letter-spacing2rpx;
 line-height40rpx;
}
.post-like {
 font-size13px;
 flex-direction: row;
 line-height16px;
 margin-left16px;
 color: gray;
}
.post-like-image {
 height16px;
 width16px;
 margin-right8px;
 vertical-align: middle;
}
.post-link-text {
 vertical-align: middle;
 margin-right20px;
}

二、模板使用

引入模板文件

使用模板文件 用is 使用 模板定义时的名称 data里面是循环里面里面的数据 用“...”表示的话,就可以把item里面的数据全部平铺出来,这样在template里面就不用写“item.xx”了,直接写item里面的属性就可以了 要使用template的程序wxml文件

<import src="post-item/post-item-template.wxml" />
<view>
 <block wx:for="{{postList}}" wx:for-item="item">
   <template is="postItem" data="{{...item}}" />
 </block>
</view>

wxss 文件

@import 'post-item/post-item-template.wxss';

看完了这篇文章,相信你对“微信小程序如何实现template模板”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×