Template模板的使用

来自CloudWiki
跳转至: 导航搜索

template解决重复问题

wx:for解决代码重复只在当前页面,不能跨多个页面 如果跨多个页面可以使用template模板

创建post-item-template.wxml

在posts文件中新建post-item文件夹 在post-item文件夹中创建post-item-template.wxml

  • 代码
<template name="postItem">
 <view class='post-container'>
   <view class='post-author-date'>
     <image wx:if="{ {item.img_condition} }" class='post-author' src="{ {item.avatar} }"></image>
     <text class='post-date'>{ {item.date} }</text>
   </view>
   <text class='post-title'>{ {item.title} }</text>
   <image class='post-image' src="{ {item.imgSrc}}"></image> 
   <text class='post-content'>{ {content} }</text>
   <view class='post-like'>
     <image class='post-like-image' src='../../images/icon/01.jpg'></image>
     <text class='post-like-font'>{ {item.collection} }</text>
     <image class='post-like-image' src='../../images/icon/02.jpg'></image>
     <text class='post-like-font'>{ {item.reading} }</text>
   </view>
 </view>
</template>


改写post.js中代码,并引用post-item-template.wxml

格式:<import src="引用路径" />

  • 代码
<import src="post-item/post-item-template.wxml" />
 <view>
  <swiper indicator-indicator-dots='true' autoplay='true' interval='5000'>
   <swiper-item><image src='/images/04.jpg'></image></swiper-item>
   <swiper-item><image src='/images/02.jpg'></image></swiper-item>
   <swiper-item><image src='/images/03.jpg'></image></swiper-item>
  </swiper>
  <block wx:for="{ {posts_key} }" wx:for-item="item" wx:for-index="idx">  
  <template is="postItem" data="{ {item} }" />
</block>
</view> 
</block>
</view>

注意:

  • is template 的is 属性和模板中的name 属性对应,表示你要使用的具体模板。
  • data 是用来做数据传递,同样用数据绑定的方式。其中item是posts_key中的子元素,而<template />不是指列表所有文章,而是其中一个,所以用子元素填充。

创建post-item-template.wxss

在post-item文件夹中创建post-item-template.wxss

  • 代码
.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 10px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height:40rpx;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-image{
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

建议:

  • 此代码可以放在当前页面的WXSS中,也可以放在全局wxss中 ;如果项目需要大量使用一个模板,WXSS引入到全局,减少代码量;如果项目只是很少地方使用模板,可以在需要的页面引入WXSS。


改写post.wxss代码,并引用post-item-template.wxss

格式:@import "....";

  • 代码
@import "post-item/post-item-template.wxss";
swiper{
  width: 100%;
  height: 600rpx;
}
swiper image {
  width: 100%;
  height: 600rpx;
}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding-bottom: 5px;
}
  • 小结:

wxml和wxss两种引用不同,前者为<import src="引用路径" />,后者则是@import "....";

在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用